/* ------------------------ start theme ------------------------------ */

/* 主题色
-------------------------- */
/// color|1|Theme Color|4
$--color-primary: #1890ff !default;


/* 功能色
-------------------------- */
/// color|1|Function Color|4
$--color-success: #52c41a !default;
/// color|1|Function Color|4
$--color-warning: #faad14 !default;
/// color|1|Function Color|4
$--color-danger: #f5222d !default;
/// color|1|Function Color|4
$--color-info: #bfbfbf !default;

/* 辅助色
-------------------------- */
/// color|1|Neuter Color|4
$--color-white: #ffffff !default;
/// color|1|Neuter Color|4
$--color-black: #000000 !default;

/* 文本颜色
-------------------------- */
/// text|1|Text Color|4
$--color-text-primary: rgba($--color-black, .85) !default;
/// text|1|Text Color|4
$--color-text-secondary: rgba($--color-black, .65) !default;
/// text|1|Text Color|4
$--color-text-regular: rgba($--color-black, .45) !default;
/// text|1|Text Color|4
$--color-text-placeholder: rgba($--color-black, .25) !default;

/* 边框颜色
-------------------------- */
/// text|1|Divider Color|4
$--border-color-base: rgba($--color-black, .15) !default;

/* 分割线颜色
-------------------------- */
/// text|1|Divider Color|4
$--border-color-extra-light: rgba($--color-black, .09) !default;

/* 图标颜色
-------------------------- */
/// text|1|Icon Color|4
$--message-close-icon-color: rgba($--color-black, .45) !default;
$--message-close-hover-color: rgba($--color-black, .65) !default;

/* 禁用颜色
-------------------------- */
/// text|1|Disabled Color|4
$--disabled-fill-base: rgba($--color-black, .04) !default;
/// text|1|Disabled Color|4
$--disabled-color-base: rgba($--color-black, .25) !default;
/// text|1|Disabled Color|4
$--disabled-border-base: rgba($--color-black, .15) !default;

/* 背景色
-------------------------- */
/// text|1|background Color|4
$--background-color-base: rgba($--color-primary, 0.08) !default;

/* 表头颜色
-------------------------- */
/// text|1|TableHead Color|4
$--table-header-background-color: rgba($--color-black, 0.02) !default;

/* 基础填充色
-------------------------- */
$--fill-base:  $--color-white !default;

/* ------------------------ end theme ------------------------------ */

/* ------------------------ start sys ------------------------------ */

/* default global setting
-------------------------- */
/// text|1|Global Color|4
$l-admin-app: $--color-white !default;
/// text|1|Global Color|4
$l-admin-app-bg: mix($--color-black, $l-admin-app, 4%) !default;

/* other component reset
-------------------------- */
/// text|1|Input Color|4
$--input-background-color: $--color-white !default;
/// text|1|DropDown Color|4
$dg--dropdown-menu-background: $l-admin-app !default;
/// text|1|Popover Color|4
$--popover-background-color: $l-admin-app !default;
/// text|1|Message Color|4
$--message-background-color: $l-admin-app !default;
/// text|1|Select Color|4
$--select-dropdown-background: $l-admin-app !default;
/// text|1|SelectTag Color|4
$dg--select-tag-background-color: $l-admin-app !default;
/// text|1|Card Color|4
$dg--card-background: $--color-white !default;
/// date|1|background Color|4
//$dg--picker-panel-background: $l-admin-app-bg !default;
$dg--picker-panel-background: $--color-white !default;
/// tooltip|1|background Color|4
$--tooltip-fill: rgba($--color-black, .8) !default;
/// tooltip|1|font Color|4
$--tooltip-color: $--color-white !default;

/* l-main-header 头部区域
-------------------------- */
/// color|1|Header Color|4
$l-main-header-background-gradient-1: #0856c3 !default;
/// color|1|Header Color|4
$l-main-header-background-gradient-2: #2f9bff !default;
/// color|1|Header Color|4
$l-main-header-title-color: #ffffff !default;
/// color|1|Header Color|4
$l-avatar-box-font-color: #eef8fe !default;

/* l-menu 侧边栏布局
-------------------------- */
/// color|1|Sidebar Color|4
$l-sidebar-background: #ffffff !default;
/// color|1|Sidebar Color|4
$l-sidebar-header-border: $--disabled-border-base !default;
/// color|1|Sidebar Color|4
$u-menu-background: #ffffff !default;
/// color|1|Sidebar Color|4
$u-menu-font: #333333 !default;
/// color|1|Sidebar Color|4
$u-menu-icon-font: #999999 !default;
$--menu-background-color: transparent !default;

/* l-main-tags 标签页
-------------------------- */
/// color|1|TagPage Color|4
$l-main-tags-item-background-color: #ffffff !default;
/// text|1|TagPage Color|4
$l-main-context-background-color: rgba($l-admin-app-bg, 1) !default;
/// text|1|TagPage Color|4
$l-main-tags-item-font-color: $--color-text-primary !default;
/// text|1|TagPage Color|4
$l-main-tags-item-active-font-color: rgba($--color-white, .85) !default;
$l-main-tags-item-active-background-color: $--color-primary;
$l-main-tags-item-close-color: $--color-text-regular;

/* dg-normal-card 卡片
-------------------------- */
/// text|1|NormalCard Color|4
$dg-normal-card-background: rgba($--color-white, 1) !default;
/// text|1|NormalCard Color|4
$--button-default-background-color: rgba($--color-white, 1) !default;
$dg-card-background: $dg-normal-card-background !default;

/* ------------------------ end sys ------------------------------ */

/** ui4**/
$--font-path: '~ui-component-v4/lib/theme-chalk/fonts';
$dg--font-path: '~ui-component-v4/lib/theme-chalk/icon';
$dg--image-path: '~ui-component-v4/lib/theme-chalk/images';

/* media query
-------------------------- */
$large: 'screen and (min-width: 1681px)';
$medium: 'screen and (max-width: 1680px) and (min-width: 1366px)';
$small: 'screen and (max-width: 1365px)';
$l-rem: 16px;
$m-rem: 14px;
$s-rem: 12px;

@mixin mq($mqString) {
	@media #{$mqString} {
		@content;
	}
}

/* 正文文字
 * @include font;
-------------------------- */
@mixin font {
    font-size: 14px;
    @include mq($small) {
        font-size: 12px;
    }
}

/* l-main-header 头部区域
-------------------------- */
$l-main-header-height: 4rem;

/* l-main-tags 标签页
-------------------------- */
$l-main-tags-item-large-margin-top: 10px;
$l-main-tags-item-medium-margin-top: 7.5px;
$l-main-tags-item-small-margin-top: 4px;
$l-main-tags-item-large-margin: $l-main-tags-item-large-margin-top 4px;
$l-main-tags-item-medium-margin: $l-main-tags-item-medium-margin-top 4px;
$l-main-tags-item-small-margin: $l-main-tags-item-small-margin-top 4px;

/* l-menu 侧边栏布局
-------------------------- */
$l-sidebar-width: 17rem;
$l-sidebar-shrink-width: 4rem;

$l-sidebar-large-header-height: 54px;
$l-sidebar-medium-header-height: 48px;
$l-sidebar-small-header-height: 40px;

$u-menu-active-font: $--color-primary;
$u-menu-active-bg: rgba($--color-primary, .08);
$u-menu-select-bg: rgba($--color-primary, .12);
$--menu-background-color: $u-menu-background !default;
$--menu-item-hover-fill: $u-menu-active-bg !default;

/* u-menu 菜单栏
-------------------------- */
$u-menu-item-height: 3rem;

/* u-menu-top 横向菜单栏
-------------------------- */
$u-menu-top-item-font: $--color-white !default;
$u-menu-top-item-active-bg: #1682e6 !default;
$u-menu-top-border-bottom-color: $--color-white !default;
$u-menu-top-sub-item-font: rgba($--color-black, .85) !default;
$u-menu-top-active-font: $--color-primary !default;
$u-menu-top-active-bg: rgba($--color-primary, .08) !default;
$u-menu-top-select-bg: rgba($--color-primary, .12) !default;
$u-menu-top-popover-background: $--color-white !default;

/* l-template-box 通用布局
-------------------------- */
$l-template-box-border-bottom: 1px solid rgba(0,0,0,.09) !default;
$l-template-box-bacground-color: #ffffff !default;
$l-template-box-border: none;

/************************ 结果页********************************/

/* v-submit-successfully 提交成功
-------------------------- */
$v-submit-successfully-content-border: rgba(0, 0, 0, 0.02);

/* linear-gradient 线性渐变
-------------------------- */
@mixin linear-gradient($color-first, $color-second) {
	background: -moz-linear-gradient(top, $color-first 0%, $color-second 50%, $color-second 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, $color-first), color-stop(50%, $color-second), color-stop(100%, $color-second));
	background: -webkit-linear-gradient(left, $color-first 0%, $color-second 50%, $color-second 100%);
	background: -o-linear-gradient(left, $color-first 0%, $color-second 50%, $color-second 100%);
	background: -ms-linear-gradient(left, $color-first 0%, $color-second 50%, $color-second 100%);
	background: linear-gradient(to left, $color-first 10%, $color-second 50%, $color-second 100%);
}

/* 文件路径变量
-------------------------- */
$--base-resources-path: "../images";

/* 项目样式文件
-------------------------- */
// 服务器动态生成


// 覆盖 element-ui 变量
/* ------------------------ start theme ------------------------------ */

/* 主题色
-------------------------- */
/// color|1|Theme Color|4
$--color-primary: #1890ff !default;

/* 功能色
-------------------------- */
/// color|1|Function Color|4
$--color-success: #52c41a !default;
/// color|1|Function Color|4
$--color-warning: #faad14 !default;
/// color|1|Function Color|4
$--color-danger: #f5222d !default;
/// color|1|Function Color|4
$--color-info: #bfbfbf !default;

/* 辅助色
-------------------------- */
/// color|1|Neuter Color|4
$--color-white: #ffffff !default;
/// color|1|Neuter Color|4
$--color-black: #000000 !default;

/* 文本颜色
-------------------------- */
/// text|1|Text Color|4
$--color-text-primary: rgba($--color-black, .85) !default;
/// text|1|Text Color|4
$--color-text-secondary: rgba($--color-black, .65) !default;
/// text|1|Text Color|4
$--color-text-regular: rgba($--color-black, .45) !default;
/// text|1|Text Color|4
$--color-text-placeholder: rgba($--color-black, .25) !default;

/* 边框颜色
-------------------------- */
/// text|1|Divider Color|4
$--border-color-base: rgba($--color-black, .15) !default;

/* 分割线颜色
-------------------------- */
/// text|1|Border Color|4
$--border-color-extra-light: rgba($--color-black, .09) !default;

/* 图标颜色
-------------------------- */
/// text|1|Icon Color|4
$--message-close-icon-color: rgba($--color-black, .45) !default;
/// text|1|Icon Color|4
$--message-close-hover-color: rgba($--color-black, .65) !default;

/* 禁用颜色
-------------------------- */
/// text|1|Disabled Color|4
$--disabled-fill-base: rgba($--color-black, .04) !default;
/// text|1|Disabled Color|4
$--disabled-color-base: rgba($--color-black, .25) !default;
/// text|1|Disabled Color|4
$--disabled-border-base: rgba($--color-black, .15) !default;

/* 背景色
-------------------------- */
/// text|1|background Color|4
$--background-color-base: rgba($--color-primary, 0.08) !default;

/* 表头颜色
-------------------------- */
/// text|1|TableHead Color|4
$--table-header-background-color: rgba($--color-black, 0.02) !default;

/* ------------------------ end theme ------------------------------ */

/* AssistColor
-------------------------- */
$dg--color-assist-1: mix($--color-white, $--color-primary, 90%) !default; // e8f4ff
$dg--color-assist-2: mix($--color-white, $--color-primary, 70%) !default; // badeff
$dg--color-assist-3: mix($--color-white, $--color-primary, 50%) !default; // 8cc8ff
$dg--color-assist-4: mix($--color-white, $--color-primary, 30%) !default; // 5db1ff
$dg--color-assist-5: mix($--color-white, $--color-primary, 10%) !default; // 2f9bff
$dg--color-assist-6: mix($--color-black, $--color-primary, 10%) !default; // 1682e6
$dg--color-assist-7: mix($--color-black, $--color-primary, 25%) !default; // 1165b3
$dg--color-assist-8: mix($--color-black, $--color-primary, 40%) !default; // 0c4880
$dg--color-assist-9: mix($--color-black, $--color-primary, 55%) !default; // 072b4d
$dg--color-assist-10: mix($--color-black, $--color-primary, 70%) !default; // 020e1a

/* 辅助色
-------------------------- */
$dg-color-neuter-1: #fafafa !default;
$dg-color-neuter-2: #f5f5f5 !default;
$dg-color-neuter-3: #e8e8e8 !default;
$dg-color-neuter-4: #d9d9d9 !default;
$dg-color-neuter-5: #bfbfbf !default;
$dg-color-neuter-6: #8c8c8c !default;
$dg-color-neuter-7: #595959 !default;
$dg-color-neuter-8: #262626 !default;

/* Typography 文字大小
-------------------------- */
$--font-size-extra-large: 20px !default;
$--font-size-large: 18px !default;
$--font-size-medium: 16px !default;
$--font-size-base: 14px !default;
$--font-size-small: 12px !default;
$--font-size-extra-small: 12px !default;
$--font-weight-primary: 500 !default;
$--font-weight-secondary: 100 !default;
$--font-line-height-primary: 24px !default;
$--font-line-height-secondary: 16px !default;
$--font-color-disabled-base: $--color-text-placeholder !default;

/* Border
-------------------------- */
$--border-color-light: $--border-color-base !default;
$--border-color-lighter: $--border-color-base !default;

/* Box-shadow
-------------------------- */
$--box-shadow-base: 0 2px 4px rgba($--color-black, 0.12),
0 0 6px rgba($--color-black, 0.04) !default;
$--box-shadow-dark: 0 2px 4px rgba($--color-black, 0.12),
0 0 6px rgba($--color-black, 0.12) !default;
$--box-shadow-light: 0 2px 12px 0 rgba($--color-black, 0.1) !default;

/* Fill
-------------------------- */
$--fill-base: $--color-white !default;

/* Border
-------------------------- */
$--border-width-base: 1px !default;
$--border-style-base: solid !default;
$--border-color-hover: $--color-text-placeholder !default;
$--border-base: $--border-width-base $--border-style-base $--border-color-base !default;
$--border-radius-base: 2px !default;
$--border-radius-small: 2px !default;
$--border-radius-circle: 100% !default;
$--border-radius-zero: 0 !default;

/* Tooltip
-------------------------- */
$--tooltip-fill: rgba($--color-white, .9) !default;
$--tooltip-border-color: $--tooltip-fill !default;
$--tooltip-color: rgba($--color-black, .85) !default;

/* Button
-------------------------- */
$--button-font-size: 14px !default;
$--button-font-weight: $--font-weight-primary !default;
$--button-border-radius: $--border-radius-base !default;
$--button-padding-vertical: 8px !default;
$--button-padding-horizontal: 16px !default;

$--button-medium-font-size: 16px !default;
$--button-medium-border-radius: $--border-radius-base !default;
$--button-medium-padding-vertical: 11px !default;
$--button-medium-padding-horizontal: $--button-padding-horizontal !default;

$--button-small-font-size: $--button-font-size !default;
$--button-small-border-radius: $--border-radius-base !default;
$--button-small-padding-vertical: $--button-padding-vertical !default;
$--button-small-padding-horizontal: $--button-padding-horizontal !default;

$--button-mini-font-size: 12px !default;
$--button-mini-border-radius: $--border-radius-base !default;
$--button-mini-padding-vertical: 5px !default;
$--button-mini-padding-horizontal: $--button-padding-horizontal !default;

/// text|1|Button Color|4
$--button-default-font-color: $--color-text-primary !default;
/// text|1|Button Color|4
$--button-default-background-color: $--color-white !default;
/// text|1|Button Color|4
$--button-default-border-color: $--border-color-base !default;

/// text|1|Button Color|4
$--button-disabled-font-color: $--disabled-color-base !default;
/// text|1|Button Color|4
$--button-disabled-background-color: $--disabled-fill-base !default;
/// text|1|Button Color|4
$--button-disabled-border-color: $--disabled-border-base !default;

/// text|1|Button Color|4
$--button-primary-border-color: $--color-primary !default;
/// text|1|Button Color|4
$--button-primary-font-color: $--color-white !default;
/// text|1|Button Color|4
$--button-primary-background-color: $--color-primary !default;

/// text|1|Button Color|4
$--button-success-border-color: $--color-success !default;
/// text|1|Button Color|4
$--button-success-font-color: $--color-white !default;
/// text|1|Button Color|4
$--button-success-background-color: $--color-success !default;

/// text|1|Button Color|4
$--button-warning-border-color: $--color-warning !default;
/// text|1|Button Color|4
$--button-warning-font-color: $--color-white !default;
/// text|1|Button Color|4
$--button-warning-background-color: $--color-warning !default;

/// text|1|Button Color|4
$--button-danger-border-color: $--color-danger !default;
/// text|1|Button Color|4
$--button-danger-font-color: $--color-white !default;
/// text|1|Button Color|4
$--button-danger-background-color: $--color-danger !default;

$--button-info-border-color: $--color-info !default;
$--button-info-font-color: $--color-white !default;
$--button-info-background-color: $--color-info !default;

$--button-hover-tint-percent: 10% !default;
$--button-active-shade-percent: 10% !default;

/* Tag
-------------------------- */
$--tag-info-color: $--color-text-secondary !default;
/// text|1|Tag Color|4
$--tag-primary-color: $--color-primary !default;
/// text|1|Tag Color|4
$--tag-success-color: $--color-success !default;
/// text|1|Tag Color|4
$--tag-warning-color: $--color-warning !default;
/// text|1|Tag Color|4
$--tag-danger-color: $--color-danger !default;
$--tag-padding: 0 12px !default;
$--tag-font-size: 12px !default;
$--tag-border-radius: $--border-radius-base !default;

/* Scrollbar
-------------------------- */
/// text|1|Scrollbar Color|4
$--scrollbar-background-color: $--border-color-extra-light !default;
/// text|1|Scrollbar Color|4
$--scrollbar-hover-background-color: $--border-color-extra-light !default;

/* Checkbox
-------------------------- */
$--checkbox-font-size: 14px !default;
$--checkbox-font-weight: $--font-weight-primary !default;
$--checkbox-font-color: $--color-text-primary !default;

$--checkbox-input-height: 16px !default;
$--checkbox-input-width: 16px !default;
$--checkbox-border-radius: $--border-radius-small !default;
$--checkbox-background-color: transparent !default;
$--checkbox-input-border: 1px solid $--border-color-base !default;

$--checkbox-disabled-border-color: $--border-color-base !default;
$--checkbox-disabled-input-fill: $--disabled-fill-base !default;
$--checkbox-disabled-icon-color: $--color-text-placeholder !default;
$--checkbox-disabled-checked-input-fill: $--checkbox-background-color !default;
$--checkbox-disabled-checked-input-border-color: $dg-color-neuter-4 !default;
$--checkbox-disabled-checked-icon-color: $--color-text-placeholder !default;

$--checkbox-checked-font-color: $--color-primary !default;
$--checkbox-checked-input-border-color: $--color-primary !default;
$--checkbox-checked-background-color: $--color-primary !default;
$--checkbox-checked-icon-color: $--color-white !default;

$--checkbox-input-border-color-hover: $--color-primary !default;
$--checkbox-bordered-height: 40px !default;
$--checkbox-bordered-padding: 9px 20px 9px 10px !default;
$--checkbox-bordered-medium-padding: 7px 20px 7px 10px !default;
$--checkbox-bordered-small-padding: 5px 15px 5px 10px !default;
$--checkbox-bordered-mini-padding: 3px 15px 3px 10px !default;
$--checkbox-bordered-medium-input-height: 16px !default;
$--checkbox-bordered-medium-input-width: 16px !default;
$--checkbox-bordered-medium-height: 36px !default;
$--checkbox-bordered-small-input-height: 16px !default;
$--checkbox-bordered-small-input-width: 16px !default;
$--checkbox-bordered-small-height: 32px !default;
$--checkbox-bordered-mini-input-height: 14px !default;
$--checkbox-bordered-mini-input-width: 14px !default;
$--checkbox-bordered-mini-height: 24px !default;

$--checkbox-button-checked-background-color: $--color-primary !default;
$--checkbox-button-checked-font-color: $--color-white !default;
$--checkbox-button-checked-border-color: $--color-primary !default;

/* Input
-------------------------- */
$--input-font-size: $--font-size-base !default;
$--input-height: 32px !default;
/// color||Input Color|0
$--input-font-color: $--color-text-primary !default;
$--input-border: $--border-base !default;

$--input-border-color: $--border-color-base !default;
$--input-border-radius: $--border-radius-base !default;
$--input-border-color-hover: $--border-color-hover !default;
$--input-background-color: $--color-white !default;
$--input-fill-disabled: $--disabled-fill-base !default;
$--input-color-disabled: $--font-color-disabled-base !default;
$--input-icon-color: $--color-text-regular !default;
$--input-placeholder-color: $--color-text-placeholder !default;
$--input-max-width: 314px !default;

$--input-hover-border: $--border-color-hover !default;
$--input-clear-hover-color: $--color-text-secondary !default;

$--input-focus-border: $--color-primary !default;
$--input-focus-fill: $--color-white !default;

$--input-disabled-fill: $--disabled-fill-base !default;
$--input-disabled-border: 1px solid $dg-color-neuter-4 !default;
$--input-disabled-color: $--color-text-placeholder !default;
$--input-disabled-placeholder-color: $--color-text-placeholder !default;

$--input-medium-font-size: 16px !default;
$--input-small-font-size: 14px !default;
$--input-mini-font-size: 12px !default;

$--input-medium-height: 40px !default;
$--input-small-height: 32px !default;
$--input-mini-height: 24px !default;

/* Select
-------------------------- */
$--select-border-color-hover: $--border-color-hover !default;
$--select-disabled-border: $--disabled-border-base !default;
$--select-font-size: $--font-size-base !default;
$--select-close-hover-color: $--color-text-secondary !default;

$--select-input-color: $--color-text-regular !default;
$--select-multiple-input-color: $--color-text-secondary !default;
$--select-input-focus-border-color: $--color-primary !default;
$--select-input-font-size: 14px !default;

$--select-option-color: $--color-text-primary !default;
$--select-option-disabled-color: $--color-text-placeholder !default;
$--select-option-disabled-background: $--color-white !default;
$--select-option-height: 32px !default;
$--select-option-hover-background: rgba($--color-primary, 0.08) !default;
$--select-option-selected-font-color: $--color-primary !default;
$--select-option-selected-hover: $--background-color-base !default;

$--select-group-color: $--color-info !default;
$--select-group-height: 30px !default;
$--select-group-font-size: 12px !default;

$--select-dropdown-background: $--color-white !default;
$--select-dropdown-shadow: $--box-shadow-light !default;
$--select-dropdown-empty-color: $--color-text-regular !default;
$--select-dropdown-max-height: 274px !default;
$--select-dropdown-padding: 6px 0 !default;
$--select-dropdown-empty-padding: 10px 0 !default;
$--select-dropdown-border: solid 1px $--border-color-light !default;

/* Radio
-------------------------- */
$--radio-font-size: $--font-size-base !default;
$--radio-font-weight: $--font-weight-primary !default;
$--radio-font-color: $--color-text-primary !default;
$--radio-input-height: 16px !default;
$--radio-input-width: 16px !default;
$--radio-input-border-radius: $--border-radius-circle !default;
$--radio-input-background-color: transparent !default;
$--radio-input-border: 1px solid $--border-color-base !default;
$--radio-input-border-color: $--border-color-base !default;
$--radio-icon-color: $--color-white !default;

$--radio-disabled-input-border-color: $dg-color-neuter-4 !default;
$--radio-disabled-input-fill: $--disabled-fill-base !default;
$--radio-disabled-icon-color: $dg-color-neuter-4 !default;

$--radio-disabled-checked-input-border-color: $--disabled-border-base !default;
$--radio-disabled-checked-input-fill: $--disabled-fill-base !default;
$--radio-disabled-checked-icon-color: $--color-text-placeholder !default;

$--radio-checked-font-color: $--color-primary !default;
$--radio-checked-input-border-color: $--color-primary !default;
$--radio-checked-input-background-color: $--color-white !default;
$--radio-checked-icon-color: transparent !default;
$--radio-input-border-color-hover: $--color-primary !default;

$--radio-bordered-height: 40px !default;
$--radio-bordered-padding: 12px 20px 0 10px !default;
$--radio-bordered-medium-padding: 10px 20px 0 10px !default;
$--radio-bordered-small-padding: 8px 15px 0 10px !default;
$--radio-bordered-mini-padding: 6px 15px 0 10px !default;
$--radio-bordered-medium-input-height: 14px !default;
$--radio-bordered-medium-input-width: 14px !default;
$--radio-bordered-medium-height: 36px !default;
$--radio-bordered-small-input-height: 12px !default;
$--radio-bordered-small-input-width: 12px !default;
$--radio-bordered-small-height: 32px !default;
$--radio-bordered-mini-input-height: 12px !default;
$--radio-bordered-mini-input-width: 12px !default;
$--radio-bordered-mini-height: 28px !default;

$--radio-button-font-size: $--font-size-base !default;
$--radio-button-checked-background-color: $--color-primary !default;
$--radio-button-checked-font-color: $--color-white !default;
$--radio-button-checked-border-color: $--color-primary !default;
$--radio-button-disabled-checked-fill: $--disabled-color-base !default;

/* Cascader
-------------------------- */
$--cascader-menu-font-color: $--color-text-primary !default;
$--cascader-menu-selected-font-color: $--color-primary !default;
$--cascader-menu-fill: $--fill-base !default;
$--cascader-menu-font-size: $--font-size-base !default;
$--cascader-menu-radius: $--border-radius-base !default;
$--cascader-menu-border: solid 1px $--border-color-light !default;
$--cascader-menu-shadow: $--box-shadow-light !default;
$--cascader-node-background-hover: $--background-color-base !default;
$--cascader-node-color-disabled: $--color-text-placeholder !default;
$--cascader-color-empty: $--color-text-placeholder !default;
$--cascader-tag-background: #f0f2f5;

/* DatePicker
-------------------------- */
$--datepicker-font-color: $--color-text-secondary !default;
$--datepicker-off-font-color: $--color-text-placeholder !default;
$--datepicker-header-font-color: $--color-text-primary !default;
$--datepicker-icon-color: $--color-text-primary !default;
$--datepicker-border-color: $--disabled-border-base !default;
$--datepicker-inrange-background-color: rgba($--color-primary, 0.08) !default;
$--datepicker-inrange-hover-background-color: rgba($--color-primary, 0.08) !default;
$--datepicker-active-color: $--color-primary !default;
$--datepicker-hover-font-color: $--color-primary !default;
$--datepicker-cell-hover-color: $--color-white !default;
$--datepicker-inner-border-color: $--border-color-base !default;

/* MessageBox
-------------------------- */
/// text|1|MessageBox Color|4
$--messagebox-title-color: $--color-text-primary !default;
/// text|1|MessageBox Color|4
$--messagebox-content-color: $--color-text-primary !default;
/// text|1|MessageBox Color|4
$--messagebox-success-color: $--color-success !default;
/// text|1|MessageBox Color|4
$--messagebox-info-color: $--color-primary !default;
/// text|1|MessageBox Color|4
$--messagebox-warning-color: $--color-warning !default;
/// text|1|MessageBox Color|4
$--messagebox-danger-color: $--color-danger !default;

$--msgbox-width: 416px !default;
$--msgbox-border-radius: 4px !default;
$--messagebox-font-size: 16px !default;
$--messagebox-content-font-size: $--font-size-base !default;
$--messagebox-error-font-size: 12px !default;
$--msgbox-padding-primary: 32px !default;

/* Dialog
-------------------------- */
/// text|1|Dialog Color|4
$--dialog-background-color: $--color-white !default;
$--dialog-box-shadow: 0 1px 3px rgba($--color-black, 0.3) !default;
$--dialog-title-font-size: 16px !default;
$--dialog-content-font-size: 14px !default;
$--dialog-font-line-height: $--font-line-height-secondary !default;

/* Alert
-------------------------- */
/// text|1|Alert Color|4
$--alert-info-color: rgba($--color-primary, .08) !default;
/// text|1|Alert Color|4
$--alert-warning-color: rgba($--color-warning, .08) !default;
/// text|1|Alert Color|4
$--alert-danger-color: rgba($--color-danger, .08) !default;
/// text|1|Alert Color|4
$--alert-success-color: rgba($--color-success, .08) !default;
$--alert-icon-size: 14px !default;
$--alert-padding: 8px 16px 8px 8px !default;
$--alert-description-font-size: 14px !default;

/* Tree
-------------------------- */
$--tree-node-hover-background-color: rgba($--color-primary, 0.08) !default;
$--tree-font-color: $--color-text-primary !default;
$--tree-expand-icon-color: $--color-text-regular !default;

/* Transfer
-------------------------- */
$--transfer-panel-header-background-color: $--color-white !default;

/* Table
-------------------------- */
$--table-header-font-color: $--color-text-secondary !default;
$--table-font-color: $--color-text-primary !default;

/* Switch
-------------------------- */
$--switch-off-color: $--color-text-placeholder !default;

/* Card
-------------------------- */
$--card-padding: 16px !default;

/* Badge
-------------------------- */
$--badge-size: 18px !default;

/* Message
-------------------------- */
$--message-padding: 8px 16px !default;
$--message-background-color: $--color-white !default;
$--message-success-font-color: $--color-success !default;
$--message-danger-font-color:$--color-danger !default;
$--message-info-font-color:$--color-primary !default;
$--message-warning-font-color:$--color-warning !default;

/* Notification
-------------------------- */
$--notification-padding: 24px !default;
$--notification-content-color: $--color-text-secondary !default;
$--notification-group-margin-right: 20px !default;
$--notification-success-icon-color: $--color-success !default;
$--notification-danger-icon-color: $--color-danger !default;
$--notification-info-icon-color: $--color-primary !default;
$--notification-warning-icon-color: $--color-danger !default;
$--notification-close-color: $--message-close-icon-color !default;
$--notification-close-hover-color: $--message-close-hover-color !default;

/* Pagination
-------------------------- */
/// color||Color|0
$--pagination-button-disabled-color: $--disabled-color-base !default;
/// color||Color|0
$--pagination-border-radius: $--border-radius-small !default;
/// color||Color|0
$--pagination-button-color: $--color-text-primary !default;
/// color||Color|0
$--pagination-background-color: transparent !default;
/// color||Color|0
$--pagination-font-color: $--color-text-primary !default;
/// color||Color|0
$--pagination-button-disabled-background-color: transparent !default;
/// color||Color|0
$--pagination-hover-color: $--color-primary !default;

/* Collapse
-------------------------- */
$--collapse-header-font-size: 14px !default;
$--collapse-border-color: $dg-color-neuter-3 !default;
$--collapse-header-font-color: $--color-text-primary !default;
$--collapse-content-font-size: 14px !default;
$--collapse-content-font-color: $--color-text-secondary !default;

/* Menu
-------------------------- */
$--menu-background-color: transparent !default;

// element-ui 变量
/* Element Chalk Variables */

// Special comment for theme configurator
// type|skipAutoTranslation|Category|Order
// skipAutoTranslation 1

// create author:lutz


/* Transition
-------------------------- */
$--all-transition: all .3s cubic-bezier(.645,.045,.355,1) !default;
$--fade-transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) !default;
$--fade-linear-transition: opacity 200ms linear !default;
$--md-fade-transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) !default;
$--border-transition-base: border-color .2s cubic-bezier(.645,.045,.355,1) !default;
$--color-transition-base: color .2s cubic-bezier(.645,.045,.355,1) !default;

/* Color
-------------------------- */
/// color|1|Brand Color|0
$--color-primary: #409EFF !default;
/// color|1|Background Color|4
$--color-white: #FFFFFF !default;
/// color|1|Background Color|4
$--color-black: #000000 !default;
$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */
$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */
$--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */
$--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */
$--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */
$--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */
$--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */
$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */
$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */
/// color|1|Functional Color|1
$--color-success: #67C23A !default;
/// color|1|Functional Color|1
$--color-warning: #E6A23C !default;
/// color|1|Functional Color|1
$--color-danger: #F56C6C !default;
/// color|1|Functional Color|1
$--color-info: #909399 !default;

$--color-success-light: mix($--color-white, $--color-success, 80%) !default;
$--color-warning-light: mix($--color-white, $--color-warning, 80%) !default;
$--color-danger-light: mix($--color-white, $--color-danger, 80%) !default;
$--color-info-light: mix($--color-white, $--color-info, 80%) !default;

$--color-success-lighter: mix($--color-white, $--color-success, 90%) !default;
$--color-warning-lighter: mix($--color-white, $--color-warning, 90%) !default;
$--color-danger-lighter: mix($--color-white, $--color-danger, 90%) !default;
$--color-info-lighter: mix($--color-white, $--color-info, 90%) !default;
/// color|1|Font Color|2
$--color-text-primary: #303133 !default;
/// color|1|Font Color|2
$--color-text-regular: #606266 !default;
/// color|1|Font Color|2
$--color-text-secondary: #909399 !default;
/// color|1|Font Color|2
$--color-text-placeholder: #C0C4CC !default;
/// color|1|Border Color|3
$--border-color-base: #DCDFE6 !default;
/// color|1|Border Color|3
$--border-color-light: #E4E7ED !default;
/// color|1|Border Color|3
$--border-color-lighter: #EBEEF5 !default;
/// color|1|Border Color|3
$--border-color-extra-light: #F2F6FC !default;

// Background
/// color|1|Background Color|4
$--background-color-base: #F5F7FA !default;

/* Link
-------------------------- */
$--link-color: $--color-primary-light-2 !default;
$--link-hover-color: $--color-primary !default;

/* Border
-------------------------- */
$--border-width-base: 1px !default;
$--border-style-base: solid !default;
$--border-color-hover: $--color-text-placeholder !default;
$--border-base: $--border-width-base $--border-style-base $--border-color-base !default;
/// borderRadius|1|Radius|0
$--border-radius-base: 4px !default;
/// borderRadius|1|Radius|0
$--border-radius-small: 2px !default;
/// borderRadius|1|Radius|0
$--border-radius-circle: 100% !default;
/// borderRadius|1|Radius|0
$--border-radius-zero: 0 !default;

// Box-shadow
/// boxShadow|1|Shadow|1
$--box-shadow-base: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04) !default;
// boxShadow|1|Shadow|1
$--box-shadow-dark: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .12) !default;
/// boxShadow|1|Shadow|1
$--box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !default;

/* Fill
-------------------------- */
$--fill-base: $--color-white !default;

/* Typography
-------------------------- */
// +lutz- [code] $--font-path: 'fonts' !default;
$--font-path: 'element-scss/fonts' !default;
$--font-display: 'auto' !default;
/// fontSize|1|Font Size|0
$--font-size-extra-large: 20px !default;
/// fontSize|1|Font Size|0
$--font-size-large: 18px !default;
/// fontSize|1|Font Size|0
$--font-size-medium: 16px !default;
/// fontSize|1|Font Size|0
$--font-size-base: 14px !default;
/// fontSize|1|Font Size|0
$--font-size-small: 13px !default;
/// fontSize|1|Font Size|0
$--font-size-extra-small: 12px !default;
/// fontWeight|1|Font Weight|1
$--font-weight-primary: 500 !default;
/// fontWeight|1|Font Weight|1
$--font-weight-secondary: 100 !default;
/// fontLineHeight|1|Line Height|2
$--font-line-height-primary: 24px !default;
/// fontLineHeight|1|Line Height|2
$--font-line-height-secondary: 16px !default;
$--font-color-disabled-base: #bbb !default;
/* Size
-------------------------- */
$--size-base: 14px !default;

/* z-index
-------------------------- */
$--index-normal: 1 !default;
$--index-top: 1000 !default;
$--index-popper: 2000 !default;

/* Disable base
-------------------------- */
$--disabled-fill-base: $--background-color-base !default;
$--disabled-color-base: $--color-text-placeholder !default;
$--disabled-border-base: $--border-color-light !default;

/* Icon
-------------------------- */
$--icon-color: #666 !default;
$--icon-color-base: $--color-info !default;

/* Checkbox
-------------------------- */
/// fontSize||Font|1
$--checkbox-font-size: 14px !default;
/// fontWeight||Font|1
$--checkbox-font-weight: $--font-weight-primary !default;
/// color||Color|0
$--checkbox-font-color: $--color-text-regular !default;
$--checkbox-input-height: 14px !default;
$--checkbox-input-width: 14px !default;
/// borderRadius||Border|2
$--checkbox-border-radius: $--border-radius-small !default;
/// color||Color|0
$--checkbox-background-color: transparent !default;
$--checkbox-input-border: $--border-base !default;

/// color||Color|0
$--checkbox-disabled-border-color: $--border-color-base !default;
$--checkbox-disabled-input-fill: #edf2fc !default;
$--checkbox-disabled-icon-color: $--color-text-placeholder !default;

$--checkbox-disabled-checked-input-fill: $--border-color-extra-light !default;
$--checkbox-disabled-checked-input-border-color: $--border-color-base !default;
$--checkbox-disabled-checked-icon-color: $--color-text-placeholder !default;

/// color||Color|0
$--checkbox-checked-font-color: $--color-primary !default;
$--checkbox-checked-input-border-color: $--color-primary !default;
/// color||Color|0
$--checkbox-checked-background-color: $--color-primary !default;
$--checkbox-checked-icon-color: $--fill-base !default;

$--checkbox-input-border-color-hover: $--color-primary !default;
/// height||Other|4
$--checkbox-bordered-height: 40px !default;
/// padding||Spacing|3
$--checkbox-bordered-padding: 9px 20px 9px 10px !default;
/// padding||Spacing|3
$--checkbox-bordered-medium-padding: 7px 20px 7px 10px !default;
/// padding||Spacing|3
$--checkbox-bordered-small-padding: 5px 15px 5px 10px !default;
/// padding||Spacing|3
$--checkbox-bordered-mini-padding: 3px 15px 3px 10px !default;
$--checkbox-bordered-medium-input-height: 14px !default;
$--checkbox-bordered-medium-input-width: 14px !default;
/// height||Other|4
$--checkbox-bordered-medium-height: 36px !default;
$--checkbox-bordered-small-input-height: 12px !default;
$--checkbox-bordered-small-input-width: 12px !default;
/// height||Other|4
$--checkbox-bordered-small-height: 32px !default;
$--checkbox-bordered-mini-input-height: 12px !default;
$--checkbox-bordered-mini-input-width: 12px !default;
/// height||Other|4
$--checkbox-bordered-mini-height: 28px !default;

/// color||Color|0
$--checkbox-button-checked-background-color: $--color-primary !default;
/// color||Color|0
$--checkbox-button-checked-font-color: $--color-white !default;
/// color||Color|0
$--checkbox-button-checked-border-color: $--color-primary !default;



/* Radio
-------------------------- */
/// fontSize||Font|1
$--radio-font-size: $--font-size-base !default;
/// fontWeight||Font|1
$--radio-font-weight: $--font-weight-primary !default;
/// color||Color|0
$--radio-font-color: $--color-text-regular !default;
$--radio-input-height: 14px !default;
$--radio-input-width: 14px !default;
/// borderRadius||Border|2
$--radio-input-border-radius: $--border-radius-circle !default;
/// color||Color|0
$--radio-input-background-color: $--color-white !default;
$--radio-input-border: $--border-base !default;
/// color||Color|0
$--radio-input-border-color: $--border-color-base !default;
/// color||Color|0
$--radio-icon-color: $--color-white !default;

$--radio-disabled-input-border-color: $--disabled-border-base !default;
$--radio-disabled-input-fill: $--disabled-fill-base !default;
$--radio-disabled-icon-color: $--disabled-fill-base !default;

$--radio-disabled-checked-input-border-color: $--disabled-border-base !default;
$--radio-disabled-checked-input-fill: $--disabled-fill-base !default;
$--radio-disabled-checked-icon-color: $--color-text-placeholder !default;

/// color||Color|0
$--radio-checked-font-color: $--color-primary !default;
/// color||Color|0
$--radio-checked-input-border-color: $--color-primary !default;
/// color||Color|0
$--radio-checked-input-background-color: $--color-white !default;
/// color||Color|0
$--radio-checked-icon-color: $--color-primary !default;

$--radio-input-border-color-hover: $--color-primary !default;

$--radio-bordered-height: 40px !default;
$--radio-bordered-padding: 12px 20px 0 10px !default;
$--radio-bordered-medium-padding: 10px 20px 0 10px !default;
$--radio-bordered-small-padding: 8px 15px 0 10px !default;
$--radio-bordered-mini-padding: 6px 15px 0 10px !default;
$--radio-bordered-medium-input-height: 14px !default;
$--radio-bordered-medium-input-width: 14px !default;
$--radio-bordered-medium-height: 36px !default;
$--radio-bordered-small-input-height: 12px !default;
$--radio-bordered-small-input-width: 12px !default;
$--radio-bordered-small-height: 32px !default;
$--radio-bordered-mini-input-height: 12px !default;
$--radio-bordered-mini-input-width: 12px !default;
$--radio-bordered-mini-height: 28px !default;

/// fontSize||Font|1
$--radio-button-font-size: $--font-size-base !default;
/// color||Color|0
$--radio-button-checked-background-color: $--color-primary !default;
/// color||Color|0
$--radio-button-checked-font-color: $--color-white !default;
/// color||Color|0
$--radio-button-checked-border-color: $--color-primary !default;
$--radio-button-disabled-checked-fill: $--border-color-extra-light !default;

/* Select
-------------------------- */
$--select-border-color-hover: $--border-color-hover !default;
$--select-disabled-border: $--disabled-border-base !default;
/// fontSize||Font|1
$--select-font-size: $--font-size-base !default;
$--select-close-hover-color: $--color-text-secondary !default;

$--select-input-color: $--color-text-placeholder !default;
$--select-multiple-input-color: #666 !default;
/// color||Color|0
$--select-input-focus-border-color: $--color-primary !default;
/// fontSize||Font|1
$--select-input-font-size: 14px !default;

$--select-option-color: $--color-text-regular !default;
$--select-option-disabled-color: $--color-text-placeholder !default;
$--select-option-disabled-background: $--color-white !default;
/// height||Other|4
$--select-option-height: 34px !default;
$--select-option-hover-background: $--background-color-base !default;
/// color||Color|0
$--select-option-selected-font-color: $--color-primary !default;
$--select-option-selected-hover: $--background-color-base !default;

$--select-group-color: $--color-info !default;
$--select-group-height: 30px !default;
$--select-group-font-size: 12px !default;

$--select-dropdown-background: $--color-white !default;
$--select-dropdown-shadow: $--box-shadow-light !default;
$--select-dropdown-empty-color: #999 !default;
/// height||Other|4
$--select-dropdown-max-height: 274px !default;
$--select-dropdown-padding: 6px 0 !default;
$--select-dropdown-empty-padding: 10px 0 !default;
$--select-dropdown-border: solid 1px $--border-color-light !default;

/* Alert
-------------------------- */
$--alert-padding: 8px 16px !default;
/// borderRadius||Border|2
$--alert-border-radius: $--border-radius-base !default;
/// fontSize||Font|1
$--alert-title-font-size: 13px !default;
/// fontSize||Font|1
$--alert-description-font-size: 12px !default;
/// fontSize||Font|1
$--alert-close-font-size: 12px !default;
/// fontSize||Font|1
$--alert-close-customed-font-size: 13px !default;

$--alert-success-color: $--color-success-lighter !default;
$--alert-info-color: $--color-info-lighter !default;
$--alert-warning-color: $--color-warning-lighter !default;
$--alert-danger-color: $--color-danger-lighter !default;

/// height||Other|4
$--alert-icon-size: 16px !default;
/// height||Other|4
$--alert-icon-large-size: 28px !default;

/* MessageBox
-------------------------- */
/// color||Color|0
$--messagebox-title-color: $--color-text-primary !default;
$--msgbox-width: 420px !default;
$--msgbox-border-radius: 4px !default;
/// fontSize||Font|1
$--messagebox-font-size: $--font-size-large !default;
/// fontSize||Font|1
$--messagebox-content-font-size: $--font-size-base !default;
/// color||Color|0
$--messagebox-content-color: $--color-text-regular !default;
/// fontSize||Font|1
$--messagebox-error-font-size: 12px !default;
$--msgbox-padding-primary: 15px !default;
/// color||Color|0
$--messagebox-success-color: $--color-success !default;
/// color||Color|0
$--messagebox-info-color: $--color-info !default;
/// color||Color|0
$--messagebox-warning-color: $--color-warning !default;
/// color||Color|0
$--messagebox-danger-color: $--color-danger !default;

/* Message
-------------------------- */
$--message-shadow: $--box-shadow-base !default;
$--message-min-width: 380px !default;
$--message-background-color: #edf2fc !default;
$--message-padding: 15px 15px 15px 20px !default;
/// color||Color|0
$--message-close-icon-color: $--color-text-placeholder !default;
/// height||Other|4
$--message-close-size: 16px !default;
/// color||Color|0
$--message-close-hover-color: $--color-text-secondary !default;

/// color||Color|0
$--message-success-font-color: $--color-success !default;
/// color||Color|0
$--message-info-font-color: $--color-info !default;
/// color||Color|0
$--message-warning-font-color: $--color-warning !default;
/// color||Color|0
$--message-danger-font-color: $--color-danger !default;

/* Notification
-------------------------- */
$--notification-width: 330px !default;
/// padding||Spacing|3
$--notification-padding: 14px 26px 14px 13px !default;
// update author: tangdm descript:  $--notification-radius: 8px !default;
$--notification-radius: 2px !default;
$--notification-shadow: $--box-shadow-light !default;
/// color||Color|0
$--notification-border-color: $--border-color-lighter !default;
$--notification-icon-size: 24px !default;
$--notification-close-font-size: $--message-close-size !default;
$--notification-group-margin-left: 13px !default;
$--notification-group-margin-right: 8px !default;
/// fontSize||Font|1
$--notification-content-font-size: $--font-size-base !default;
/// color||Color|0
$--notification-content-color: $--color-text-regular !default;
/// fontSize||Font|1
$--notification-title-font-size: 16px !default;
/// color||Color|0
$--notification-title-color: $--color-text-primary !default;

/// color||Color|0
$--notification-close-color: $--color-text-secondary !default;
/// color||Color|0
$--notification-close-hover-color: $--color-text-regular !default;

/// color||Color|0
$--notification-success-icon-color: $--color-success !default;
/// color||Color|0
$--notification-info-icon-color: $--color-info !default;
/// color||Color|0
$--notification-warning-icon-color: $--color-warning !default;
/// color||Color|0
$--notification-danger-icon-color: $--color-danger !default;

/* Input
-------------------------- */
$--input-font-size: $--font-size-base !default;
/// color||Color|0
$--input-font-color: $--color-text-regular !default;
/// height||Other|4
$--input-width: 140px !default;
/// height||Other|4
$--input-height: 40px !default;
$--input-border: $--border-base !default;
$--input-border-color: $--border-color-base !default;
/// borderRadius||Border|2
$--input-border-radius: $--border-radius-base !default;
$--input-border-color-hover: $--border-color-hover !default;
/// color||Color|0
$--input-background-color: $--color-white !default;
$--input-fill-disabled: $--disabled-fill-base !default;
$--input-color-disabled: $--font-color-disabled-base !default;
/// color||Color|0
$--input-icon-color: $--color-text-placeholder !default;
/// color||Color|0
$--input-placeholder-color: $--color-text-placeholder !default;
$--input-max-width: 314px !default;

$--input-hover-border: $--border-color-hover !default;
$--input-clear-hover-color: $--color-text-secondary !default;

$--input-focus-border: $--color-primary !default;
$--input-focus-fill: $--color-white !default;

$--input-disabled-fill: $--disabled-fill-base !default;
$--input-disabled-border: $--disabled-border-base !default;
$--input-disabled-color: $--disabled-color-base !default;
$--input-disabled-placeholder-color: $--color-text-placeholder !default;

/// fontSize||Font|1
$--input-medium-font-size: 14px !default;
/// height||Other|4
$--input-medium-height: 36px !default;
/// fontSize||Font|1
$--input-small-font-size: 13px !default;
/// height||Other|4
$--input-small-height: 32px !default;
/// fontSize||Font|1
$--input-mini-font-size: 12px !default;
/// height||Other|4
$--input-mini-height: 28px !default;

/* Cascader
-------------------------- */
/// color||Color|0
$--cascader-menu-font-color: $--color-text-regular !default;
/// color||Color|0
$--cascader-menu-selected-font-color: $--color-primary !default;
$--cascader-menu-fill: $--fill-base !default;
$--cascader-menu-font-size: $--font-size-base !default;
$--cascader-menu-radius: $--border-radius-base !default;
$--cascader-menu-border: solid 1px $--border-color-light !default;
$--cascader-menu-shadow: $--box-shadow-light !default;
$--cascader-node-background-hover: $--background-color-base !default;
$--cascader-node-color-disabled:$--color-text-placeholder !default;
$--cascader-color-empty:$--color-text-placeholder !default;
$--cascader-tag-background: #f0f2f5;

/* Group
-------------------------- */
$--group-option-flex: 0 0 (1/5) * 100% !default;
$--group-option-offset-bottom: 12px !default;
$--group-option-fill-hover: rgba($--color-black, 0.06) !default;
$--group-title-color: $--color-black !default;
$--group-title-font-size: $--font-size-base !default;
$--group-title-width: 66px !default;

/* Tab
-------------------------- */
$--tab-font-size: $--font-size-base !default;
$--tab-border-line: 1px solid #e4e4e4 !default;
$--tab-header-color-active: $--color-text-secondary !default;
$--tab-header-color-hover: $--color-text-regular !default;
$--tab-header-color: $--color-text-regular !default;
$--tab-header-fill-active: rgba($--color-black, 0.06) !default;
$--tab-header-fill-hover: rgba($--color-black, 0.06) !default;
$--tab-vertical-header-width: 90px !default;
$--tab-vertical-header-count-color: $--color-white !default;
$--tab-vertical-header-count-fill: $--color-text-secondary !default;

/* Button
-------------------------- */
/// fontSize||Font|1
$--button-font-size: $--font-size-base !default;
/// fontWeight||Font|1
$--button-font-weight: $--font-weight-primary !default;
/// borderRadius||Border|2
$--button-border-radius: $--border-radius-base !default;
/// padding||Spacing|3
$--button-padding-vertical: 12px !default;
/// padding||Spacing|3
$--button-padding-horizontal: 20px !default;

/// fontSize||Font|1
$--button-medium-font-size: $--font-size-base !default;
/// borderRadius||Border|2
$--button-medium-border-radius: $--border-radius-base !default;
/// padding||Spacing|3
$--button-medium-padding-vertical: 10px !default;
/// padding||Spacing|3
$--button-medium-padding-horizontal: 20px !default;

/// fontSize||Font|1
$--button-small-font-size: 12px !default;
$--button-small-border-radius: #{$--border-radius-base - 1} !default;
/// padding||Spacing|3
$--button-small-padding-vertical: 9px !default;
/// padding||Spacing|3
$--button-small-padding-horizontal: 15px !default;
/// fontSize||Font|1
$--button-mini-font-size: 12px !default;
$--button-mini-border-radius: #{$--border-radius-base - 1} !default;
/// padding||Spacing|3
$--button-mini-padding-vertical: 7px !default;
/// padding||Spacing|3
$--button-mini-padding-horizontal: 15px !default;

/// color||Color|0
$--button-default-font-color: $--color-text-regular !default;
/// color||Color|0
$--button-default-background-color: $--color-white !default;
/// color||Color|0
$--button-default-border-color: $--border-color-base !default;

/// color||Color|0
$--button-disabled-font-color: $--color-text-placeholder !default;
/// color||Color|0
$--button-disabled-background-color: $--color-white !default;
/// color||Color|0
$--button-disabled-border-color: $--border-color-lighter !default;

/// color||Color|0
$--button-primary-border-color: $--color-primary !default;
/// color||Color|0
$--button-primary-font-color: $--color-white !default;
/// color||Color|0
$--button-primary-background-color: $--color-primary !default;
/// color||Color|0
$--button-success-border-color: $--color-success !default;
/// color||Color|0
$--button-success-font-color: $--color-white !default;
/// color||Color|0
$--button-success-background-color: $--color-success !default;
/// color||Color|0
$--button-warning-border-color: $--color-warning !default;
/// color||Color|0
$--button-warning-font-color: $--color-white !default;
/// color||Color|0
$--button-warning-background-color: $--color-warning !default;
/// color||Color|0
$--button-danger-border-color: $--color-danger !default;
/// color||Color|0
$--button-danger-font-color: $--color-white !default;
/// color||Color|0
$--button-danger-background-color: $--color-danger !default;
/// color||Color|0
$--button-info-border-color: $--color-info !default;
/// color||Color|0
$--button-info-font-color: $--color-white !default;
/// color||Color|0
$--button-info-background-color: $--color-info !default;

$--button-hover-tint-percent: 20% !default;
$--button-active-shade-percent: 10% !default;


/* cascader
-------------------------- */
$--cascader-height: 200px !default;

/* Switch
-------------------------- */
/// color||Color|0
$--switch-on-color: $--color-primary !default;
/// color||Color|0
$--switch-off-color: $--border-color-base !default;
/// fontSize||Font|1
$--switch-font-size: $--font-size-base !default;
$--switch-core-border-radius: 10px !default;
// height||Other|4 TODO: width 代码写死的40px 所以下面这三个属性都没意义
$--switch-width: 40px !default;
// height||Other|4
$--switch-height: 20px !default;
// height||Other|4
$--switch-button-size: 16px !default;

/* Dialog
-------------------------- */
$--dialog-background-color: $--color-white !default;
$--dialog-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !default;
/// fontSize||Font|1
$--dialog-title-font-size: $--font-size-large !default;
/// fontSize||Font|1
$--dialog-content-font-size: 14px !default;
/// fontLineHeight||LineHeight|2
$--dialog-font-line-height: $--font-line-height-primary !default;
/// padding||Spacing|3
$--dialog-padding-primary: 20px !default;

/* Table
-------------------------- */
/// color||Color|0
$--table-border-color: $--border-color-lighter !default;
$--table-border: 1px solid $--table-border-color !default;
/// color||Color|0
$--table-font-color: $--color-text-regular !default;
/// color||Color|0
$--table-header-font-color: $--color-text-secondary !default;
/// color||Color|0
$--table-row-hover-background-color: $--background-color-base !default;
$--table-current-row-background-color: $--color-primary-light-9 !default;
/// color||Color|0
$--table-header-background-color: $--color-white !default;
$--table-fixed-box-shadow: 0 0 10px rgba(0, 0, 0, .12) !default;

/* Pagination
-------------------------- */
/// fontSize||Font|1
$--pagination-font-size: 13px !default;
/// color||Color|0
$--pagination-background-color: $--color-white !default;
/// color||Color|0
$--pagination-font-color: $--color-text-primary !default;
$--pagination-border-radius: 3px !default;
/// color||Color|0
$--pagination-button-color: $--color-text-primary !default;
/// height||Other|4
$--pagination-button-width: 35.5px !default;
/// height||Other|4
$--pagination-button-height: 28px !default;
/// color||Color|0
$--pagination-button-disabled-color: $--color-text-placeholder !default;
/// color||Color|0
$--pagination-button-disabled-background-color: $--color-white !default;
/// color||Color|0
$--pagination-hover-color: $--color-primary !default;

/* Popup
-------------------------- */
/// color||Color|0
$--popup-modal-background-color: $--color-black !default;
/// opacity||Other|1
$--popup-modal-opacity: 0.5 !default;

/* Popover
-------------------------- */
/// color||Color|0
$--popover-background-color: $--color-white !default;
/// fontSize||Font|1
$--popover-font-size: $--font-size-base !default;
/// color||Color|0
$--popover-border-color: $--border-color-lighter !default;
$--popover-arrow-size: 6px !default;
/// padding||Spacing|3
$--popover-padding: 12px !default;
$--popover-padding-large: 18px 20px !default;
/// fontSize||Font|1
$--popover-title-font-size: 16px !default;
/// color||Color|0
$--popover-title-font-color: $--color-text-primary !default;

/* Tooltip
-------------------------- */
/// color|1|Color|0
$--tooltip-fill: $--color-text-primary !default;
/// color|1|Color|0
$--tooltip-color: $--color-white !default;
/// fontSize||Font|1
$--tooltip-font-size: 12px !default;
/// color||Color|0
$--tooltip-border-color: $--color-text-primary !default;
$--tooltip-arrow-size: 6px !default;
/// padding||Spacing|3
$--tooltip-padding: 10px !default;

/* Tag
-------------------------- */
/// color||Color|0
$--tag-info-color: $--color-info !default;
/// color||Color|0
$--tag-primary-color: $--color-primary !default;
/// color||Color|0
$--tag-success-color: $--color-success !default;
/// color||Color|0
$--tag-warning-color: $--color-warning !default;
/// color||Color|0
$--tag-danger-color: $--color-danger !default;
/// fontSize||Font|1
$--tag-font-size: 12px !default;
$--tag-border-radius: 4px !default;
$--tag-padding: 0 10px !default;

/* Tree
-------------------------- */
/// color||Color|0
$--tree-node-hover-background-color: $--background-color-base !default;
/// color||Color|0
$--tree-font-color: $--color-text-regular !default;
/// color||Color|0
$--tree-expand-icon-color: $--color-text-placeholder !default;

/* Dropdown
-------------------------- */
$--dropdown-menu-box-shadow: $--box-shadow-light !default;
$--dropdown-menuItem-hover-fill: $--color-primary-light-9 !default;
$--dropdown-menuItem-hover-color: $--link-color !default;

/* Badge
-------------------------- */
/// color||Color|0
$--badge-background-color: $--color-danger !default;
$--badge-radius: 10px !default;
/// fontSize||Font|1
$--badge-font-size: 12px !default;
/// padding||Spacing|3
$--badge-padding: 6px !default;
/// height||Other|4
$--badge-size: 18px !default;

/* Card
--------------------------*/
/// color||Color|0
$--card-border-color: $--border-color-lighter !default;
$--card-border-radius: 4px !default;
/// padding||Spacing|3
$--card-padding: 20px !default;

/* Slider
--------------------------*/
/// color||Color|0
$--slider-main-background-color: $--color-primary !default;
/// color||Color|0
$--slider-runway-background-color: $--border-color-light !default;
$--slider-button-hover-color: mix($--color-primary, black, 97%) !default;
$--slider-stop-background-color: $--color-white !default;
$--slider-disable-color: $--color-text-placeholder !default;
$--slider-margin: 16px 0 !default;
$--slider-border-radius: 3px !default;
/// height|1|Other|4
$--slider-height: 6px !default;
/// height||Other|4
$--slider-button-size: 16px !default;
$--slider-button-wrapper-size: 36px !default;
$--slider-button-wrapper-offset: -15px !default;

/* Steps
--------------------------*/
$--steps-border-color: $--disabled-border-base !default;
$--steps-border-radius: 4px !default;
$--steps-padding: 20px !default;

/* Menu
--------------------------*/
/// fontSize||Font|1
$--menu-item-font-size: $--font-size-base !default;
/// color||Color|0
$--menu-item-font-color: $--color-text-primary !default;
/// color||Color|0
$--menu-background-color: $--color-white !default;
$--menu-item-hover-fill: $--color-primary-light-9 !default;

/* Rate
--------------------------*/
$--rate-height: 20px !default;
/// fontSize||Font|1
$--rate-font-size: $--font-size-base !default;
/// height||Other|3
$--rate-icon-size: 18px !default;
/// margin||Spacing|2
$--rate-icon-margin: 6px !default;
$--rate-icon-color: $--color-text-placeholder !default;

/* DatePicker
--------------------------*/
$--datepicker-font-color: $--color-text-regular !default;
/// color|1|Color|0
$--datepicker-off-font-color: $--color-text-placeholder !default;
/// color||Color|0
$--datepicker-header-font-color: $--color-text-regular !default;
$--datepicker-icon-color: $--color-text-primary !default;
$--datepicker-border-color: $--disabled-border-base !default;
$--datepicker-inner-border-color: #e4e4e4 !default;
/// color||Color|0
$--datepicker-inrange-background-color: $--border-color-extra-light !default;
/// color||Color|0
$--datepicker-inrange-hover-background-color: $--border-color-extra-light !default;
/// color||Color|0
$--datepicker-active-color: $--color-primary !default;
/// color||Color|0
$--datepicker-hover-font-color: $--color-primary !default;
$--datepicker-cell-hover-color: #fff !default;

/* Loading
--------------------------*/
/// height||Other|4
$--loading-spinner-size: 42px !default;
/// height||Other|4
$--loading-fullscreen-spinner-size: 50px !default;

/* Scrollbar
--------------------------*/
$--scrollbar-background-color: rgba($--color-text-secondary, .3) !default;
$--scrollbar-hover-background-color: rgba($--color-text-secondary, .5) !default;

/* Carousel
--------------------------*/
/// fontSize||Font|1
$--carousel-arrow-font-size: 12px !default;
$--carousel-arrow-size: 36px !default;
$--carousel-arrow-background: rgba(31, 45, 61, 0.11) !default;
$--carousel-arrow-hover-background: rgba(31, 45, 61, 0.23) !default;
/// width||Other|4
$--carousel-indicator-width: 30px !default;
/// height||Other|4
$--carousel-indicator-height: 2px !default;
$--carousel-indicator-padding-horizontal: 4px !default;
$--carousel-indicator-padding-vertical: 12px !default;
$--carousel-indicator-out-color: $--border-color-hover !default;

/* Collapse
--------------------------*/
/// color||Color|0
$--collapse-border-color: $--border-color-lighter !default;
/// height||Other|4
$--collapse-header-height: 48px !default;
/// color||Color|0
$--collapse-header-background-color: $--color-white !default;
/// color||Color|0
$--collapse-header-font-color: $--color-text-primary !default;
/// fontSize||Font|1
$--collapse-header-font-size: 13px !default;
/// color||Color|0
$--collapse-content-background-color: $--color-white !default;
/// fontSize||Font|1
$--collapse-content-font-size: 13px !default;
/// color||Color|0
$--collapse-content-font-color: $--color-text-primary !default;

/* Transfer
--------------------------*/
$--transfer-border-color: $--border-color-lighter !default;
$--transfer-border-radius: $--border-radius-base !default;
/// height||Other|4
$--transfer-panel-width: 200px !default;
/// height||Other|4
$--transfer-panel-header-height: 40px !default;
/// color||Color|0
$--transfer-panel-header-background-color: $--background-color-base !default;
/// height||Other|4
$--transfer-panel-footer-height: 40px !default;
/// height||Other|4
$--transfer-panel-body-height: 246px !default;
/// height||Other|4
$--transfer-item-height: 30px !default;
/// height||Other|4
$--transfer-filter-height: 32px !default;

/* Header
  --------------------------*/
$--header-padding: 0 20px !default;

/* Footer
--------------------------*/
$--footer-padding: 0 20px !default;

/* Main
--------------------------*/
$--main-padding: 20px !default;

/* Timeline
--------------------------*/
$--timeline-node-size-normal: 12px !default;
$--timeline-node-size-large: 14px !default;
$--timeline-node-color: $--border-color-light !default;

/* Backtop
--------------------------*/
/// color||Color|0
$--backtop-background-color: $--color-white !default;
/// color||Color|0
$--backtop-font-color: $--color-primary !default;
/// color||Color|0
$--backtop-hover-background-color: $--border-color-extra-light !default;

/* Link
--------------------------*/
/// fontSize||Font|1
$--link-font-size: $--font-size-base !default;
/// fontWeight||Font|1
$--link-font-weight: $--font-weight-primary !default;
/// color||Color|0
$--link-default-font-color: $--color-text-regular !default;
/// color||Color|0
$--link-default-active-color: $--color-primary !default;
/// color||Color|0
$--link-disabled-font-color: $--color-text-placeholder !default;
/// color||Color|0
$--link-primary-font-color: $--color-primary !default;
/// color||Color|0
$--link-success-font-color: $--color-success !default;
/// color||Color|0
$--link-warning-font-color: $--color-warning !default;
/// color||Color|0
$--link-danger-font-color: $--color-danger !default;
/// color||Color|0
$--link-info-font-color: $--color-info !default;
/* Calendar
--------------------------*/
/// border||Other|4
$--calendar-border: $--table-border !default;
/// color||Other|4
$--calendar-selected-background-color: #F2F8FE !default;
$--calendar-cell-width: 85px !default;

/* Form
-------------------------- */
/// fontSize||Font|1
$--form-label-font-size: $--font-size-base !default;

/* Avatar
--------------------------*/
/// color||Color|0
$--avatar-font-color: #fff !default;
/// color||Color|0
$--avatar-background-color: #C0C4CC !default;
/// fontSize||Font Size|1
$--avatar-text-font-size: 14px !default;
/// fontSize||Font Size|1
$--avatar-icon-font-size: 18px !default;
/// borderRadius||Border|2
$--avatar-border-radius: $--border-radius-base !default;
/// size|1|Avatar Size|3
$--avatar-large-size: 40px !default;
/// size|1|Avatar Size|3
$--avatar-medium-size: 36px !default;
/// size|1|Avatar Size|3
$--avatar-small-size: 28px !default;

/* Break-point
--------------------------*/
$--sm: 768px !default;
$--md: 992px !default;
$--lg: 1200px !default;
$--xl: 1920px !default;

$--breakpoints: (
  'xs' : (max-width: $--sm - 1),
  'sm' : (min-width: $--sm),
  'md' : (min-width: $--md),
  'lg' : (min-width: $--lg),
  'xl' : (min-width: $--xl)
);

$--breakpoints-spec: (
  'xs-only' : (max-width: $--sm - 1),
  'sm-and-up' : (min-width: $--sm),
  'sm-only': "(min-width: #{$--sm}) and (max-width: #{$--md - 1})",
  'sm-and-down': (max-width: $--md - 1),
  'md-and-up' : (min-width: $--md),
  'md-only': "(min-width: #{$--md}) and (max-width: #{$--lg - 1})",
  'md-and-down': (max-width: $--lg - 1),
  'lg-and-up' : (min-width: $--lg),
  'lg-only': "(min-width: #{$--lg}) and (max-width: #{$--xl - 1})",
  'lg-and-down': (max-width: $--xl - 1),
  'xl-only' : (min-width: $--xl),
);


// 直接作用于 element-ui 变量
/* Basic
-------------------------- */
$dg--font-large: 14px;
$dg--font-medium: 14px;
$dg--font-small: 12px;

$dg--title-font-large: 18px;
$dg--title-font-medium: 16px;
$dg--title-font-small: 14px;

$dg--height-large: 32px;
$dg--height-medium: 28px;
$dg--height-small: 24px;

$dg--rem-large: 16px;
$dg--rem-medium: 14px;
$dg--rem-small: 12px;

/* Dialog
-------------------------- */
$dg--dialog-header-height-large: 3.5 * $dg--rem-large;
$dg--dialog-header-height-medium: 3.5 * $dg--rem-medium;
$dg--dialog-header-height-small: 3.5 * $dg--rem-small;
$dg--dialog-header-padding-top-large: 18px;
$dg--dialog-header-padding-top-medium: 14px;
$dg--dialog-header-padding-top-small: 10px;
$dg--dialog-body-padding-large: 1.5 * $dg--rem-large 2 * $dg--rem-large;
$dg--dialog-body-padding-medium: 1.5 * $dg--rem-medium 2 * $dg--rem-medium;
$dg--dialog-body-padding-small: 1.5 * $dg--rem-small 2 * $dg--rem-small;
$dg--dialog-header-padding-large: $dg--dialog-header-padding-top-large 48px $dg--dialog-header-padding-top-large 2 * $dg--rem-large;
$dg--dialog-header-padding-medium: $dg--dialog-header-padding-top-medium 48px $dg--dialog-header-padding-top-medium 2 * $dg--rem-medium;
$dg--dialog-header-padding-small: $dg--dialog-header-padding-top-small 48px $dg--dialog-header-padding-top-small 2 * $dg--rem-small;
$dg--dialog-footer-padding-large: $dg--rem-large 2 * $dg--rem-large;
$dg--dialog-footer-padding-medium: $dg--rem-medium 2 * $dg--rem-medium;
$dg--dialog-footer-padding-small: $dg--rem-small 2 * $dg--rem-small;

$dg--dialog-header-line-height: 1.5;
/// text|1|Dialog Color|4
$dg--dialog-border-color: $--border-color-extra-light !default;
/// text|1|Dialog Color|4
$dg--dialog-title-color: $--color-text-primary !default;

/* Button
-------------------------- */
$dg--button-medium-height: 40px !default;
$dg--button-medium-min-width: $dg--button-medium-height * 3 !default;
$dg--button-medium-icon-size: 16px !default;

$dg--button-small-height: 32px !default;
$dg--button-small-min-width: $dg--button-small-height * 3 !default;
$dg--button-small-icon-size: 14px !default;

$dg--button-mini-height: 28px !default;
$dg--button-mini-min-width: $dg--button-mini-height * 3 !default;
$dg--button-mini-icon-size: 12px !default;

// button height
$dg--button-media-large-height: 32px !default;
$dg--button-media-medium-height: 28px !default;
$dg--button-media-small-height: 24px !default;

// button padding
$dg--button-large-padding-vertical: 8px !default;
$dg--button-medium-padding-vertical: 6px !default;
$dg--button-small-padding-vertical: 0 !default;

/* Radio
-------------------------- */
$dg--radio-label-padding-left: 8px !default;

// media query
$dg--radio-input-large-width: 16px !default;
$dg--radio-input-medium-width: 16px !default;
$dg--radio-input-small-width: 14px !default;

/* Checkbox
-------------------------- */
// media query
$dg--checkbox-input-large-width: 16px !default;
$dg--checkbox-input-medium-width: 16px !default;
$dg--checkbox-input-small-width: 14px !default;

/* Alert
-------------------------- */
/// text|1|Alert Color|4
$dg--alert-info-border-color: rgba($--color-primary, .6) !default;
/// text|1|Alert Color|4
$dg--alert-warning-border-color: rgba($--color-warning, .6) !default;
/// text|1|Alert Color|4
$dg--alert-danger-border-color: rgba($--color-danger, .6) !default;
/// text|1|Alert Color|4
$dg--alert-success-border-color: rgba($--color-success, .6) !default;

$dg--checkbox-label-padding-left: 8px !default;
$dg--checkbox-button-disabled-checked-color: $--color-white !default;
$dg--checkbox-button-disabled-checked-background-color: $dg-color-neuter-3 !default;

// icon size
$dg--alert-icon-large-size: 26px !default;
$dg--alert-icon-medium-size: 24px !default;
$dg--alert-icon-small-size: 22px !default;

/* Input
-------------------------- */
$dg--input-large-height: 32px;
$dg--input-medium-height: 28px;
$dg--input-small-height: 24px;

/* Cascader
-------------------------- */
$dg--cascader-font-color: $--color-text-secondary !default;

/* Datepicker
-------------------------- */
$dg--datepicker-disabled-font-color: $dg-color-neuter-5 !default;
$dg--datepicker-disabled-background-color: $dg-color-neuter-2 !default;
$dg--datepicker-active-background-border-radius: unset !default;
$dg--datepicker-active-width: 28px !default;
$dg--datepicker-today-background: rgba($--color-primary, .08) !default;
$dg--datepicker-date-table-row-hover-radius: 0 !default;
$dg--datepicker-month-table-checked-radius: 0 !default;

/* MessageBox
-------------------------- */
/// text|1|MessageBox Color|4
$dg--message-box-background: $--color-white !default;

/* PickerPanel
-------------------------- */
$dg--picker-panel-background: $--color-white !default;

/* table
-------------------------- */
$dg--table-cell-line-height: 1.5 !default;
$dg--table-cell-padding-left: 16px !default;
$dg--table-cell-padding-right: 16px !default;
$dg--table-background: $--color-white !default;
$dg--table-header-th-bg-color: $--table-header-background-color !default;
$dg--table-sort-caret-color: $--color-text-regular !default;
$dg--table-drag-placeholder-bg-color: $dg-color-neuter-1 !default;

/* transfer
-------------------------- */
$dg--transfer-background: transparent !default;

/* Tree
-------------------------- */
$dg--tree-node-checked-background-color: rgba($--color-primary, 0.12) !default;

/* Card
-------------------------- */
$dg--box-shadow-light: 0px 2px 8px rgba($--color-black, 0.1) !default;
$dg--card-background: transparent !default;

/* Message
-------------------------- */
$dg--message-font-color: $--color-text-primary !default;
$dg--message-box-shadow: 0px 2px 8px rgba($--color-black, 0.1) !default;

/* Tag
-------------------------- */
/// text|1|Tag Color|4
$dg--tag-font-color: $--color-text-primary !default;
/// text|1|Tag Color|4
$dg--tag-border-color: $--border-color-base !default;
/// text|1|Tag Color|4
$dg--tag-background-color: $--table-header-background-color !default;

$dg--tag-medium-height: 26px !default;
$dg--tag-small-height: 22px !default;
$dg--tag-mini-height: 18px !default;
$dg--tag-medium-font-size: 12px !default;
$dg--tag-small-font-size: 12px !default;
$dg--tag-mini-font-size: 12px !default;

/* Collapse
-------------------------- */
$dg--collapse-header-arrow-font-color: $--color-text-regular !default;

/* Dropdown-menu
-------------------------- */
$dg--dropdown-menu-background: $--color-white !default;

/* media query
-------------------------- */
$large: 'screen and (min-width: 1681px)';
$medium: 'screen and (max-width: 1680px) and (min-width: 1366px)';
$small: 'screen and (max-width: 1365px)';

@mixin mq($mqString) {
	@media #{$mqString} {
		@content;
	}
}

/* 正文文字
 * @include font;
-------------------------- */
@mixin font {
	font-size: 14px;
	@include mq($small) {
		font-size: 12px;
	}
}

// dg 变量
/* Typography
-------------------------- */
$dg--font-path: 'icon' !default;

/* Images
-------------------------- */
$dg--image-path: 'images' !default;

/* Form
-------------------------- */
$--form-column-placeholder-background: #fff6b2 !default;

/* Table
-------------------------- */
$--table-font-color: $--color-text-secondary !default;
$--table-row-hover-background-color: rgba($--color-primary, 0.08) !default;
$--table-border-color: $dg-color-neuter-4 !default;
$--table-border: 1px solid $--table-border-color !default;
$dg--table-background-right-patch: $dg-color-neuter-1 !default;

$dg--table-head-bg-color: $dg-color-neuter-1 !default;
$dg--table-cell-line-height: 1.5 !default;
$dg--table-cell-padding-left: 16px !default;
$dg--table-cell-padding-right: 16px !default;
$dg--table-sort-caret-color: $--color-text-regular !default;
$dg-table-drag-placeholder-bg-color: $--form-column-placeholder-background !default;

/* Modal
-------------------------- */
$--modal-icon-font: 40px !default;
$--modal-divider-color: $dg-color-neuter-3 !default;
$--modal-mask-background: rgba($dg-color-neuter-5, 0.8) !default;
$--modal-container-box-shadow-color: rgba(0, 0, 0, 0.1) !default;
$--modal-transition: 0.2s !default;
$--modal-z-index: 1500 !default;

/* Select
-------------------------- */
$--tree-select-font-size: $--font-size-base !default;
$--tree-select-item-background: $dg-color-neuter-2 !default;
$dg--select-tag-background-color: $dg-color-neuter-1 !default;
$dg--select-tag-border-color: $--border-color-base !default;

/* Upload
-------------------------- */
$--upload-button-color: $--color-text-primary !default;
$--upload-button-border-color: $dg-color-neuter-4 !default;
$--upload-avatar-size: 120px !default;
$--upload-avatar-icon-color: $--color-text-regular !default;
$--upload-active-color: $dg--color-assist-6 !default;
$--upload-avatar-border: 1px dashed $--upload-button-border-color !default;

$dg--upload-button-font-color: $--color-text-primary !default;
$dg--upload-button-border-color: $dg-color-neuter-4 !default;
$dg--upload-image-padding: 7px !default;
$dg--upload-image-border: 1px dashed $--border-color-base !default;

/* Divider
-------------------------- */
$dg--divider-border-color: $dg-color-neuter-3 !default;
$dg--divider-font-color: rgba($--color-black, 0.65) !default;
$dg--divider-font-size: 14px;

/* Alert
-------------------------- */
$dg--alert-title-font-size: 16px !default;
/// text|1|Alert Color|4
$dg--alert-title-font-color: $--color-text-primary;
/// text|1|Alert Color|4
$dg--alert-description-font-color: $--color-text-primary;

/* Tag
-------------------------- */
/// text|1|Tag Color|4
$dg--tag-disabled-border: $--disabled-border-base !default;
/// text|1|Tag Color|4
$dg--tag-disabled-font-color: $--disabled-color-base;
/// text|1|Tag Color|4
$dg--tag-disabled-background-color: $--disabled-fill-base;

/* CheckboxGroup
-------------------------- */
$dg--checkbox-group--font-size: 14px !default;

/* Transfer
--------------------------*/
$dg--transfer-button-border-radius: 4px !default;
$dg--transfer-button-height: 24px !default;
$dg--transfer-panel-empty-font-color: $--color-text-regular !default;
$dg-transfer-panel-empty-font-size: 14px !default;
$dg--transfer-filter-border-radius: 4px !default;

/* TimeLine
--------------------------*/
$dg--time-line-padding: 10px !default;
$dg--time-line-line-width: 2px !default;
$dg--time-line-line-color: $dg-color-neuter-3 !default;
$dg--time-line-dot-size: 10px !default;
$dg--time-line-dot-width: 2px !default;
$dg--time-line-icon-size: 14px !default;
$dg--time-line-message-border-color: $dg-color-neuter-3 !default;
$dg--time-line-message-box-shadow: 0 2px 2px 0 rgba($--color-black, 0.1) !default;

/* PageCode
-------------------------- */
$dg--page-code-width: 856px;
$dg--page-code-height: 420px;
$dg--page-code-picture-width: 460px;
$dg--page-code-picture-height: 420px;
$dg--page-code-box-padding: 125px 10px 10px 82px;
$dg--page-code-msg-margin: 5px 0;
$dg--page-code-msg-padding-left: 18px;
$dg--page-code-msg-li-margin: 10px 0;
$dg--page-code-title-font-size: 20px;
$dg--page-code-title-line-height: 30px;
$dg--page-code-en-line-height: 24px;

/* MessageBox
-------------------------- */
$dg--message-box-pad: 0;
$dg--message-box__content-pad: 12px 24px;
$dg--message-box__content-icon-padding: 12px 24px 12px 66px;
$dg--message-box__content-font: 14px;




.fade-in-linear-enter-active,
.fade-in-linear-leave-active {
  transition: $--fade-linear-transition;
}
.fade-in-linear-enter,
.fade-in-linear-leave,
.fade-in-linear-leave-active {
  opacity: 0;
}

.el-fade-in-linear-enter-active,
.el-fade-in-linear-leave-active {
  transition: $--fade-linear-transition;
}
.el-fade-in-linear-enter,
.el-fade-in-linear-leave,
.el-fade-in-linear-leave-active {
  opacity: 0;
}

.el-fade-in-enter-active,
.el-fade-in-leave-active {
  transition: all .3s cubic-bezier(.55,0,.1,1);
}
.el-fade-in-enter,
.el-fade-in-leave-active {
  opacity: 0;
}

.el-zoom-in-center-enter-active,
.el-zoom-in-center-leave-active {
  transition: all .3s cubic-bezier(.55,0,.1,1);
}
.el-zoom-in-center-enter,
.el-zoom-in-center-leave-active {
  opacity: 0;
  transform: scaleX(0);
}

.el-zoom-in-top-enter-active,
.el-zoom-in-top-leave-active {
  opacity: 1;
  transform: scaleY(1);
  transition: $--md-fade-transition;
  transform-origin: center top;
}
.el-zoom-in-top-enter,
.el-zoom-in-top-leave-active {
  opacity: 0;
  transform: scaleY(0);
}

.el-zoom-in-bottom-enter-active,
.el-zoom-in-bottom-leave-active {
  opacity: 1;
  transform: scaleY(1);
  transition: $--md-fade-transition;
  transform-origin: center bottom;
}
.el-zoom-in-bottom-enter,
.el-zoom-in-bottom-leave-active {
  opacity: 0;
  transform: scaleY(0);
}

.el-zoom-in-left-enter-active,
.el-zoom-in-left-leave-active {
  opacity: 1;
  transform: scale(1, 1);
  transition: $--md-fade-transition;
  transform-origin: top left;
}
.el-zoom-in-left-enter,
.el-zoom-in-left-leave-active {
  opacity: 0;
  transform: scale(.45, .45);
}

.collapse-transition {
  transition: 0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out;
}
.horizontal-collapse-transition {
  transition: 0.3s width ease-in-out, 0.3s padding-left ease-in-out, 0.3s padding-right ease-in-out;
}

.el-list-enter-active,
.el-list-leave-active {
  transition: all 1s;
}
.el-list-enter, .el-list-leave-active {
  opacity: 0;
  transform: translateY(-30px);
}

.el-opacity-transition {
  transition: opacity .3s cubic-bezier(.55,0,.1,1);
}


@font-face {
  font-family: 'element-icons';
  src: url('#{$--font-path}/element-icons.woff') format('woff'), /* chrome, firefox */
       url('#{$--font-path}/element-icons.ttf') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  font-weight: normal;
  font-display: $--font-display;
  font-style: normal
}

[class^="el-icon-"], [class*=" el-icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'element-icons' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: baseline;
  display: inline-block;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.el-icon-ice-cream-round:before {
  content: "\e6a0";
}

.el-icon-ice-cream-square:before {
  content: "\e6a3";
}

.el-icon-lollipop:before {
  content: "\e6a4";
}

.el-icon-potato-strips:before {
  content: "\e6a5";
}

.el-icon-milk-tea:before {
  content: "\e6a6";
}

.el-icon-ice-drink:before {
  content: "\e6a7";
}

.el-icon-ice-tea:before {
  content: "\e6a9";
}

.el-icon-coffee:before {
  content: "\e6aa";
}

.el-icon-orange:before {
  content: "\e6ab";
}

.el-icon-pear:before {
  content: "\e6ac";
}

.el-icon-apple:before {
  content: "\e6ad";
}

.el-icon-cherry:before {
  content: "\e6ae";
}

.el-icon-watermelon:before {
  content: "\e6af";
}

.el-icon-grape:before {
  content: "\e6b0";
}

.el-icon-refrigerator:before {
  content: "\e6b1";
}

.el-icon-goblet-square-full:before {
  content: "\e6b2";
}

.el-icon-goblet-square:before {
  content: "\e6b3";
}

.el-icon-goblet-full:before {
  content: "\e6b4";
}

.el-icon-goblet:before {
  content: "\e6b5";
}

.el-icon-cold-drink:before {
  content: "\e6b6";
}

.el-icon-coffee-cup:before {
  content: "\e6b8";
}

.el-icon-water-cup:before {
  content: "\e6b9";
}

.el-icon-hot-water:before {
  content: "\e6ba";
}

.el-icon-ice-cream:before {
  content: "\e6bb";
}

.el-icon-dessert:before {
  content: "\e6bc";
}

.el-icon-sugar:before {
  content: "\e6bd";
}

.el-icon-tableware:before {
  content: "\e6be";
}

.el-icon-burger:before {
  content: "\e6bf";
}

.el-icon-knife-fork:before {
  content: "\e6c1";
}

.el-icon-fork-spoon:before {
  content: "\e6c2";
}

.el-icon-chicken:before {
  content: "\e6c3";
}

.el-icon-food:before {
  content: "\e6c4";
}

.el-icon-dish-1:before {
  content: "\e6c5";
}

.el-icon-dish:before {
  content: "\e6c6";
}

.el-icon-moon-night:before {
  content: "\e6ee";
}

.el-icon-moon:before {
  content: "\e6f0";
}

.el-icon-cloudy-and-sunny:before {
  content: "\e6f1";
}

.el-icon-partly-cloudy:before {
  content: "\e6f2";
}

.el-icon-cloudy:before {
  content: "\e6f3";
}

.el-icon-sunny:before {
  content: "\e6f6";
}

.el-icon-sunset:before {
  content: "\e6f7";
}

.el-icon-sunrise-1:before {
  content: "\e6f8";
}

.el-icon-sunrise:before {
  content: "\e6f9";
}

.el-icon-heavy-rain:before {
  content: "\e6fa";
}

.el-icon-lightning:before {
  content: "\e6fb";
}

.el-icon-light-rain:before {
  content: "\e6fc";
}

.el-icon-wind-power:before {
  content: "\e6fd";
}

.el-icon-baseball:before {
  content: "\e712";
}

.el-icon-soccer:before {
  content: "\e713";
}

.el-icon-football:before {
  content: "\e715";
}

.el-icon-basketball:before {
  content: "\e716";
}

.el-icon-ship:before {
  content: "\e73f";
}

.el-icon-truck:before {
  content: "\e740";
}

.el-icon-bicycle:before {
  content: "\e741";
}

.el-icon-mobile-phone:before {
  content: "\e6d3";
}

.el-icon-service:before {
  content: "\e6d4";
}

.el-icon-key:before {
  content: "\e6e2";
}

.el-icon-unlock:before {
  content: "\e6e4";
}

.el-icon-lock:before {
  content: "\e6e5";
}

.el-icon-watch:before {
  content: "\e6fe";
}

.el-icon-watch-1:before {
  content: "\e6ff";
}

.el-icon-timer:before {
  content: "\e702";
}

.el-icon-alarm-clock:before {
  content: "\e703";
}

.el-icon-map-location:before {
  content: "\e704";
}

.el-icon-delete-location:before {
  content: "\e705";
}

.el-icon-add-location:before {
  content: "\e706";
}

.el-icon-location-information:before {
  content: "\e707";
}

.el-icon-location-outline:before {
  content: "\e708";
}

.el-icon-location:before {
  content: "\e79e";
}

.el-icon-place:before {
  content: "\e709";
}

.el-icon-discover:before {
  content: "\e70a";
}

.el-icon-first-aid-kit:before {
  content: "\e70b";
}

.el-icon-trophy-1:before {
  content: "\e70c";
}

.el-icon-trophy:before {
  content: "\e70d";
}

.el-icon-medal:before {
  content: "\e70e";
}

.el-icon-medal-1:before {
  content: "\e70f";
}

.el-icon-stopwatch:before {
  content: "\e710";
}

.el-icon-mic:before {
  content: "\e711";
}

.el-icon-copy-document:before {
  content: "\e718";
}

.el-icon-full-screen:before {
  content: "\e719";
}

.el-icon-switch-button:before {
  content: "\e71b";
}

.el-icon-aim:before {
  content: "\e71c";
}

.el-icon-crop:before {
  content: "\e71d";
}

.el-icon-odometer:before {
  content: "\e71e";
}

.el-icon-time:before {
  content: "\e71f";
}

.el-icon-bangzhu:before {
  content: "\e724";
}

.el-icon-close-notification:before {
  content: "\e726";
}

.el-icon-microphone:before {
  content: "\e727";
}

.el-icon-turn-off-microphone:before {
  content: "\e728";
}

.el-icon-position:before {
  content: "\e729";
}

.el-icon-postcard:before {
  content: "\e72a";
}

.el-icon-message:before {
  content: "\e72b";
}

.el-icon-chat-line-square:before {
  content: "\e72d";
}

.el-icon-chat-dot-square:before {
  content: "\e72e";
}

.el-icon-chat-dot-round:before {
  content: "\e72f";
}

.el-icon-chat-square:before {
  content: "\e730";
}

.el-icon-chat-line-round:before {
  content: "\e731";
}

.el-icon-chat-round:before {
  content: "\e732";
}

.el-icon-set-up:before {
  content: "\e733";
}

.el-icon-turn-off:before {
  content: "\e734";
}

.el-icon-open:before {
  content: "\e735";
}

.el-icon-connection:before {
  content: "\e736";
}

.el-icon-link:before {
  content: "\e737";
}

.el-icon-cpu:before {
  content: "\e738";
}

.el-icon-thumb:before {
  content: "\e739";
}

.el-icon-female:before {
  content: "\e73a";
}

.el-icon-male:before {
  content: "\e73b";
}

.el-icon-guide:before {
  content: "\e73c";
}

.el-icon-news:before {
  content: "\e73e";
}

.el-icon-price-tag:before {
  content: "\e744";
}

.el-icon-discount:before {
  content: "\e745";
}

.el-icon-wallet:before {
  content: "\e747";
}

.el-icon-coin:before {
  content: "\e748";
}

.el-icon-money:before {
  content: "\e749";
}

.el-icon-bank-card:before {
  content: "\e74a";
}

.el-icon-box:before {
  content: "\e74b";
}

.el-icon-present:before {
  content: "\e74c";
}

.el-icon-sell:before {
  content: "\e6d5";
}

.el-icon-sold-out:before {
  content: "\e6d6";
}

.el-icon-shopping-bag-2:before {
  content: "\e74d";
}

.el-icon-shopping-bag-1:before {
  content: "\e74e";
}

.el-icon-shopping-cart-2:before {
  content: "\e74f";
}

.el-icon-shopping-cart-1:before {
  content: "\e750";
}

.el-icon-shopping-cart-full:before {
  content: "\e751";
}

.el-icon-smoking:before {
  content: "\e752";
}

.el-icon-no-smoking:before {
  content: "\e753";
}

.el-icon-house:before {
  content: "\e754";
}

.el-icon-table-lamp:before {
  content: "\e755";
}

.el-icon-school:before {
  content: "\e756";
}

.el-icon-office-building:before {
  content: "\e757";
}

.el-icon-toilet-paper:before {
  content: "\e758";
}

.el-icon-notebook-2:before {
  content: "\e759";
}

.el-icon-notebook-1:before {
  content: "\e75a";
}

.el-icon-files:before {
  content: "\e75b";
}

.el-icon-collection:before {
  content: "\e75c";
}

.el-icon-receiving:before {
  content: "\e75d";
}

.el-icon-suitcase-1:before {
  content: "\e760";
}

.el-icon-suitcase:before {
  content: "\e761";
}

.el-icon-film:before {
  content: "\e763";
}

.el-icon-collection-tag:before {
  content: "\e765";
}

.el-icon-data-analysis:before {
  content: "\e766";
}

.el-icon-pie-chart:before {
  content: "\e767";
}

.el-icon-data-board:before {
  content: "\e768";
}

.el-icon-data-line:before {
  content: "\e76d";
}

.el-icon-reading:before {
  content: "\e769";
}

.el-icon-magic-stick:before {
  content: "\e76a";
}

.el-icon-coordinate:before {
  content: "\e76b";
}

.el-icon-mouse:before {
  content: "\e76c";
}

.el-icon-brush:before {
  content: "\e76e";
}

.el-icon-headset:before {
  content: "\e76f";
}

.el-icon-umbrella:before {
  content: "\e770";
}

.el-icon-scissors:before {
  content: "\e771";
}

.el-icon-mobile:before {
  content: "\e773";
}

.el-icon-attract:before {
  content: "\e774";
}

.el-icon-monitor:before {
  content: "\e775";
}

.el-icon-search:before {
  content: "\e778";
}

.el-icon-takeaway-box:before {
  content: "\e77a";
}

.el-icon-paperclip:before {
  content: "\e77d";
}

.el-icon-printer:before {
  content: "\e77e";
}

.el-icon-document-add:before {
  content: "\e782";
}

.el-icon-document:before {
  content: "\e785";
}

.el-icon-document-checked:before {
  content: "\e786";
}

.el-icon-document-copy:before {
  content: "\e787";
}

.el-icon-document-delete:before {
  content: "\e788";
}

.el-icon-document-remove:before {
  content: "\e789";
}

.el-icon-tickets:before {
  content: "\e78b";
}

.el-icon-folder-checked:before {
  content: "\e77f";
}

.el-icon-folder-delete:before {
  content: "\e780";
}

.el-icon-folder-remove:before {
  content: "\e781";
}

.el-icon-folder-add:before {
  content: "\e783";
}

.el-icon-folder-opened:before {
  content: "\e784";
}

.el-icon-folder:before {
  content: "\e78a";
}

.el-icon-edit-outline:before {
  content: "\e764";
}

.el-icon-edit:before {
  content: "\e78c";
}

.el-icon-date:before {
  content: "\e78e";
}

.el-icon-c-scale-to-original:before {
  content: "\e7c6";
}

.el-icon-view:before {
  content: "\e6ce";
}

.el-icon-loading:before {
  content: "\e6cf";
}

.el-icon-rank:before {
  content: "\e6d1";
}

.el-icon-sort-down:before {
  content: "\e7c4";
}

.el-icon-sort-up:before {
  content: "\e7c5";
}

.el-icon-sort:before {
  content: "\e6d2";
}

.el-icon-finished:before {
  content: "\e6cd";
}

.el-icon-refresh-left:before {
  content: "\e6c7";
}

.el-icon-refresh-right:before {
  content: "\e6c8";
}

.el-icon-refresh:before {
  content: "\e6d0";
}

.el-icon-video-play:before {
  content: "\e7c0";
}

.el-icon-video-pause:before {
  content: "\e7c1";
}

.el-icon-d-arrow-right:before {
  content: "\e6dc";
}

.el-icon-d-arrow-left:before {
  content: "\e6dd";
}

.el-icon-arrow-up:before {
  content: "\e6e1";
}

.el-icon-arrow-down:before {
  content: "\e6df";
}

.el-icon-arrow-right:before {
  content: "\e6e0";
}

.el-icon-arrow-left:before {
  content: "\e6de";
}

.el-icon-top-right:before {
  content: "\e6e7";
}

.el-icon-top-left:before {
  content: "\e6e8";
}

.el-icon-top:before {
  content: "\e6e6";
}

.el-icon-bottom:before {
  content: "\e6eb";
}

.el-icon-right:before {
  content: "\e6e9";
}

.el-icon-back:before {
  content: "\e6ea";
}

.el-icon-bottom-right:before {
  content: "\e6ec";
}

.el-icon-bottom-left:before {
  content: "\e6ed";
}

.el-icon-caret-top:before {
  content: "\e78f";
}

.el-icon-caret-bottom:before {
  content: "\e790";
}

.el-icon-caret-right:before {
  content: "\e791";
}

.el-icon-caret-left:before {
  content: "\e792";
}

.el-icon-d-caret:before {
  content: "\e79a";
}

.el-icon-share:before {
  content: "\e793";
}

.el-icon-menu:before {
  content: "\e798";
}

.el-icon-s-grid:before {
  content: "\e7a6";
}

.el-icon-s-check:before {
  content: "\e7a7";
}

.el-icon-s-data:before {
  content: "\e7a8";
}

.el-icon-s-opportunity:before {
  content: "\e7aa";
}

.el-icon-s-custom:before {
  content: "\e7ab";
}

.el-icon-s-claim:before {
  content: "\e7ad";
}

.el-icon-s-finance:before {
  content: "\e7ae";
}

.el-icon-s-comment:before {
  content: "\e7af";
}

.el-icon-s-flag:before {
  content: "\e7b0";
}

.el-icon-s-marketing:before {
  content: "\e7b1";
}

.el-icon-s-shop:before {
  content: "\e7b4";
}

.el-icon-s-open:before {
  content: "\e7b5";
}

.el-icon-s-management:before {
  content: "\e7b6";
}

.el-icon-s-ticket:before {
  content: "\e7b7";
}

.el-icon-s-release:before {
  content: "\e7b8";
}

.el-icon-s-home:before {
  content: "\e7b9";
}

.el-icon-s-promotion:before {
  content: "\e7ba";
}

.el-icon-s-operation:before {
  content: "\e7bb";
}

.el-icon-s-unfold:before {
  content: "\e7bc";
}

.el-icon-s-fold:before {
  content: "\e7a9";
}

.el-icon-s-platform:before {
  content: "\e7bd";
}

.el-icon-s-order:before {
  content: "\e7be";
}

.el-icon-s-cooperation:before {
  content: "\e7bf";
}

.el-icon-bell:before {
  content: "\e725";
}

.el-icon-message-solid:before {
  content: "\e799";
}

.el-icon-video-camera:before {
  content: "\e772";
}

.el-icon-video-camera-solid:before {
  content: "\e796";
}

.el-icon-camera:before {
  content: "\e779";
}

.el-icon-camera-solid:before {
  content: "\e79b";
}

.el-icon-download:before {
  content: "\e77c";
}

.el-icon-upload2:before {
  content: "\e77b";
}

.el-icon-upload:before {
  content: "\e7c3";
}

.el-icon-picture-outline-round:before {
  content: "\e75f";
}

.el-icon-picture-outline:before {
  content: "\e75e";
}

.el-icon-picture:before {
  content: "\e79f";
}

.el-icon-close:before {
  content: "\e6db";
}

.el-icon-check:before {
  content: "\e6da";
}

.el-icon-plus:before {
  content: "\e6d9";
}

.el-icon-minus:before {
  content: "\e6d8";
}

.el-icon-help:before {
  content: "\e73d";
}

.el-icon-s-help:before {
  content: "\e7b3";
}

.el-icon-circle-close:before {
  content: "\e78d";
}

.el-icon-circle-check:before {
  content: "\e720";
}

.el-icon-circle-plus-outline:before {
  content: "\e723";
}

.el-icon-remove-outline:before {
  content: "\e722";
}

.el-icon-zoom-out:before {
  content: "\e776";
}

.el-icon-zoom-in:before {
  content: "\e777";
}

.el-icon-error:before {
  content: "\e79d";
}

.el-icon-success:before {
  content: "\e79c";
}

.el-icon-circle-plus:before {
  content: "\e7a0";
}

.el-icon-remove:before {
  content: "\e7a2";
}

.el-icon-info:before {
  content: "\e7a1";
}

.el-icon-question:before {
  content: "\e7a4";
}

.el-icon-warning-outline:before {
  content: "\e6c9";
}

.el-icon-warning:before {
  content: "\e7a3";
}

.el-icon-goods:before {
  content: "\e7c2";
}

.el-icon-s-goods:before {
  content: "\e7b2";
}

.el-icon-star-off:before {
  content: "\e717";
}

.el-icon-star-on:before {
  content: "\e797";
}

.el-icon-more-outline:before {
  content: "\e6cc";
}

.el-icon-more:before {
  content: "\e794";
}

.el-icon-phone-outline:before {
  content: "\e6cb";
}

.el-icon-phone:before {
  content: "\e795";
}

.el-icon-user:before {
  content: "\e6e3";
}

.el-icon-user-solid:before {
  content: "\e7a5";
}

.el-icon-setting:before {
  content: "\e6ca";
}

.el-icon-s-tools:before {
  content: "\e7ac";
}

.el-icon-delete:before {
  content: "\e6d7";
}

.el-icon-delete-solid:before {
  content: "\e7c9";
}

.el-icon-eleme:before {
  content: "\e7c7";
}

.el-icon-platform-eleme:before {
  content: "\e7ca";
}

.el-icon-loading {
  animation: rotating 2s linear infinite;
}

.el-icon--right {
  margin-left: 5px;
}
.el-icon--left {
  margin-right: 5px;
}

@keyframes rotating {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}








html {
    @include mq($large) {
        font-size: $dg--font-large;
    }
    @include mq($medium) {
        font-size: $dg--font-medium;
    }
    @include mq($small) {
        font-size: $dg--font-small;
    }
}

body {
    font-family: 'Microsoft YaHei', '微软雅黑', 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', Arial,
        sans-serif;
    font-weight: 400;
    color: $--color-text-primary;
    -webkit-font-smoothing: antialiased;

    // delete author: tangdm [code]
    //font-size: $--font-size-base;
}

a {
    color: $--color-primary;
    text-decoration: none;

    &:hover,
    &:focus {
        color: mix($--color-white, $--color-primary, $--button-hover-tint-percent);
    }

    &:active {
        color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
    }
}

h1,
h2,
h3,
h4,
h5,
h6 {
    // update author: tangdm [code] color: $--color-text-regular;
    color: $--color-text-primary;
    font-weight: inherit;

    &:first-child {
        margin-top: 0;
    }

    &:last-child {
        margin-bottom: 0;
    }
}

h1 {
    font-size: #{$--font-size-base + 6px};
}

h2 {
    font-size: #{$--font-size-base + 4px};
}

h3 {
    font-size: #{$--font-size-base + 2px};
}

h4,
h5,
h6,
p {
    font-size: inherit;
}

p {
    line-height: 1.8;

    &:first-child {
        margin-top: 0;
    }

    &:last-child {
        margin-bottom: 0;
    }
}

sup,
sub {
    font-size: #{$--font-size-base - 1px};
}

small {
    font-size: #{$--font-size-base - 2px};
}

// add author: tangdm
input {
    background: $--input-background-color;
}

// delete author: tangdm [code]
//hr {
//    margin-top: 20px;
//    margin-bottom: 20px;
//    border: 0;
//    border-top: 1px solid #eeeeee;
//}

// update
// update
$namespace: 'el';
$dg-namespace: 'dg'; // lutz+
$element-separator: '__';
$modifier-separator: '--';
$state-prefix: 'is-';


/* BEM support Func
 -------------------------- */
@function selectorToString($selector) {
  $selector: inspect($selector);
  $selector: str-slice($selector, 2, -2);
  @return $selector;
}

@function containsModifier($selector) {
  $selector: selectorToString($selector);

  @if str-index($selector, $modifier-separator) {
    @return true;
  } @else {
    @return false;
  }
}

@function containWhenFlag($selector) {
  $selector: selectorToString($selector);

  @if str-index($selector, '.' + $state-prefix) {
    @return true
  } @else {
    @return false
  }
}

@function containPseudoClass($selector) {
  $selector: selectorToString($selector);

  @if str-index($selector, ':') {
    @return true
  } @else {
    @return false
  }
}

@function hitAllSpecialNestRule($selector) {

  @return containsModifier($selector) or containWhenFlag($selector) or containPseudoClass($selector);
}



/* Break-points
 -------------------------- */
@mixin res($key, $map: $--breakpoints) {
    // 循环断点Map，如果存在则返回
    @if map-has-key($map, $key) {
        @media only screen and #{inspect(map-get($map, $key))} {
            @content;
        }
    } @else {
        @warn "Undefeined points: `#{$map}`";
    }
}

/* Scrollbar
 -------------------------- */
@mixin scroll-bar {
    $--scrollbar-thumb-background: #b4bccc;
    $--scrollbar-track-background: #fff;

    &::-webkit-scrollbar {
        z-index: 11;
        width: 6px;

        &:horizontal {
            height: 6px;
        }

        &-thumb {
            border-radius: 5px;
            width: 6px;
            background: $--scrollbar-thumb-background;
        }

        &-corner {
            background: $--scrollbar-track-background;
        }

        &-track {
            background: $--scrollbar-track-background;

            &-piece {
                background: $--scrollbar-track-background;
                width: 6px;
            }
        }
    }
}

/* Placeholder
 -------------------------- */
@mixin placeholder {
    &::-webkit-input-placeholder {
        @content;
    }

    &::-moz-placeholder {
        @content;
    }

    &:-ms-input-placeholder {
        @content;
    }
}

/* BEM
 -------------------------- */
@mixin b($block) {
    $B: $namespace + '-' + $block !global;

    .#{$B} {
        @content;
    }
}

// lutz+ 添加 dg-
@mixin B($block) {
    $B: $dg-namespace + '-' + $block !global;

    .#{$B} {
        @content;
    }
}

@mixin e($element) {
    $E: $element !global;
    $selector: &;
    $currentSelector: '';
    @each $unit in $element {
        $currentSelector: #{$currentSelector + '.' + $B + $element-separator + $unit + ','};
    }

    @if hitAllSpecialNestRule($selector) {
        @at-root {
            #{$selector} {
                #{$currentSelector} {
                    @content;
                }
            }
        }
    } @else {
        @at-root {
            #{$currentSelector} {
                @content;
            }
        }
    }
}

@mixin m($modifier) {
    $selector: &;
    $currentSelector: '';
    @each $unit in $modifier {
        $currentSelector: #{$currentSelector + & + $modifier-separator + $unit + ','};
    }

    @at-root {
        #{$currentSelector} {
            @content;
        }
    }
}

@mixin configurable-m($modifier, $E-flag: false) {
    $selector: &;
    $interpolation: '';

    @if $E-flag {
        $interpolation: $element-separator + $E-flag;
    }

    @at-root {
        #{$selector} {
            .#{$B + $interpolation + $modifier-separator + $modifier} {
                @content;
            }
        }
    }
}

@mixin spec-selector($specSelector: '', $element: $E, $modifier: false, $block: $B) {
    $modifierCombo: '';

    @if $modifier {
        $modifierCombo: $modifier-separator + $modifier;
    }

    @at-root {
        #{&}#{$specSelector}.#{$block + $element-separator + $element + $modifierCombo} {
            @content;
        }
    }
}

@mixin meb($modifier: false, $element: $E, $block: $B) {
    $selector: &;
    $modifierCombo: '';

    @if $modifier {
        $modifierCombo: $modifier-separator + $modifier;
    }

    @at-root {
        #{$selector} {
            .#{$block + $element-separator + $element + $modifierCombo} {
                @content;
            }
        }
    }
}

@mixin when($state) {
    @at-root {
        &.#{$state-prefix + $state} {
            @content;
        }
    }
}

@mixin extend-rule($name) {
    @extend #{'%shared-' + $name};
}

@mixin share-rule($name) {
    $rule-name: '%shared-' + $name;

    @at-root #{$rule-name} {
        @content;
    }
}

@mixin pseudo($pseudo) {
    @at-root #{&}#{':#{$pseudo}'} {
        @content;
    }
}

@mixin utils-user-select($value) {
  -moz-user-select: $value;
  -webkit-user-select: $value;
  -ms-user-select: $value;
}

@mixin utils-clearfix {
  $selector: &;

  @at-root {
    #{$selector}::before,
    #{$selector}::after {
      display: table;
      content: "";
    }
    #{$selector}::after {
      clear: both
    }
  }
}

@mixin utils-vertical-center {
  $selector: &;

  @at-root {
    #{$selector}::after {
      display: inline-block;
      content: "";
      height: 100%;
      vertical-align: middle
    }
  }
}

@mixin utils-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}









@include b(popper) {
  .popper__arrow,
  .popper__arrow::after {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
  }

  .popper__arrow {
    border-width: $--popover-arrow-size;
    filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03))
  }

  .popper__arrow::after {
    content: " ";
    border-width: $--popover-arrow-size;
  }

  &[x-placement^="top"] {
    margin-bottom: #{$--popover-arrow-size + 6};
  }

  &[x-placement^="top"] .popper__arrow {
    bottom: -$--popover-arrow-size;
    left: 50%;
    margin-right: #{$--tooltip-arrow-size / 2};
    border-top-color: $--popover-border-color;
    border-bottom-width: 0;

    &::after {
      bottom: 1px;
      margin-left: -$--popover-arrow-size;
      border-top-color: $--popover-background-color;
      border-bottom-width: 0;
    }
  }

  &[x-placement^="bottom"] {
    margin-top: #{$--popover-arrow-size + 6};
  }

  &[x-placement^="bottom"] .popper__arrow {
    top: -$--popover-arrow-size;
    left: 50%;
    margin-right: #{$--tooltip-arrow-size / 2};
    border-top-width: 0;
    border-bottom-color: $--popover-border-color;

    &::after {
      top: 1px;
      margin-left: -$--popover-arrow-size;
      border-top-width: 0;
      border-bottom-color: $--popover-background-color;
    }
  }

  &[x-placement^="right"] {
    margin-left: #{$--popover-arrow-size + 6};
  }

  &[x-placement^="right"] .popper__arrow {
    top: 50%;
    left: -$--popover-arrow-size;
    margin-bottom: #{$--tooltip-arrow-size / 2};
    border-right-color: $--popover-border-color;
    border-left-width: 0;

    &::after {
      bottom: -$--popover-arrow-size;
      left: 1px;
      border-right-color: $--popover-background-color;
      border-left-width: 0;
    }
  }

  &[x-placement^="left"] {
    margin-right: #{$--popover-arrow-size + 6};
  }

  &[x-placement^="left"] .popper__arrow {
    top: 50%;
    right: -$--popover-arrow-size;
    margin-bottom: #{$--tooltip-arrow-size / 2};
    border-right-width: 0;
    border-left-color: $--popover-border-color;

    &::after {
      right: 1px;
      bottom: -$--popover-arrow-size;
      margin-left: -$--popover-arrow-size;
      border-right-width: 0;
      border-left-color: $--popover-background-color;
    }
  }
}

@include b(select-dropdown) {
    position: absolute;
    z-index: #{$--index-top + 1};
    border: $--select-dropdown-border;
    border-radius: $--border-radius-base;
    background-color: $--select-dropdown-background;
    box-shadow: $--select-dropdown-shadow;
    box-sizing: border-box;
    margin: 5px 0;

    @include when(multiple) {
        & .el-select-dropdown__item.selected {
            color: $--select-option-selected-font-color;
            background-color: $--select-dropdown-background;

            &.hover {
                background-color: $--select-option-hover-background;
            }

            &::after {
                position: absolute;
                right: 20px;
                font-family: 'element-icons';
                content: '\e6da';
                font-size: 12px;
                font-weight: bold;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
            }
        }

        // create author: tangdm descript: add checked for table-select
        & .dg-select-dropdown__item.selected {
            &::after {
                position: relative;
                display: table-cell;
                vertical-align: middle;
            }
        }
    }

    .el-scrollbar.is-empty .el-select-dropdown__list {
        padding: 0;
    }
}

@include b(select-dropdown__empty) {
    padding: $--select-dropdown-empty-padding;
    margin: 0;
    text-align: center;
    color: $--select-dropdown-empty-color;
    font-size: $--select-font-size;
}

@include b(select-dropdown__wrap) {
    max-height: $--select-dropdown-max-height;
}

@include b(select-dropdown__list) {
    list-style: none;
    padding: $--select-dropdown-padding;
    margin: 0;
    box-sizing: border-box;
}




@include b(textarea) {
    position: relative;
    display: inline-block;
    width: 100%;
    vertical-align: bottom;
    font-size: $--font-size-base;

    @include e(inner) {
        display: block;
        resize: vertical;
		// update author: tangdm [code] padding: 5px 15px;
        padding: 5px 12px;

        line-height: 1.5;
        box-sizing: border-box;
        width: 100%;
        font-size: inherit;
        color: $--input-font-color;
        background-color: $--input-background-color;
        background-image: none;
        border: $--input-border;
        border-radius: $--input-border-radius;
        transition: $--border-transition-base;

        &::placeholder {
            color: $--input-placeholder-color;
        }

        &:hover {
            border-color: $--input-hover-border;
        }

        &:focus {
            outline: none;
            border-color: $--input-focus-border;
        }
    }

    & .el-input__count {
        color: $--color-info;

        // delete author: tangdm [code] background: $--color-white;

        position: absolute;
        font-size: 12px;
        bottom: 5px;
        right: 10px;
    }

    @include when(disabled) {
        .el-textarea__inner {
            background-color: $--input-disabled-fill;
            border-color: $--input-disabled-border;
            color: $--input-disabled-color;
            cursor: not-allowed;

            &::placeholder {
                color: $--input-disabled-placeholder-color;
            }
        }
    }

    @include when(exceed) {
        .el-textarea__inner {
            border-color: $--color-danger;
        }

        .el-input__count {
            color: $--color-danger;
        }
    }
}

@include b(input) {
    position: relative;
    font-size: $--font-size-base;
    display: inline-block;
    width: 100%;
    @include scroll-bar;

    & .el-input__clear {
        color: $--input-icon-color;
        font-size: $--input-font-size;
        cursor: pointer;
        transition: $--color-transition-base;

        &:hover {
            color: $--input-clear-hover-color;
        }
    }

    & .el-input__count {
        height: 100%;
        display: inline-flex;
        align-items: center;
        color: $--color-info;
        font-size: 12px;

        .el-input__count-inner {
            // delete author: tangdm
            //background: $--color-white;

            line-height: initial;
            display: inline-block;
            padding: 0 5px;
        }
    }

    @include e(inner) {
        -webkit-appearance: none;
        background-color: $--input-background-color;
        background-image: none;
        border-radius: $--input-border-radius;
        border: $--input-border;
        box-sizing: border-box;
        color: $--input-font-color;
        display: inline-block;
        outline: none;
		// update author: tangdm [code] padding: 0 15px;
        padding: 0 12px;

		// update author: tangdm [code] font-size: inherit; height: $--input-height; line-height: $--input-height;
		@include mq($large) {
			font-size: $dg--font-large;
			height: $dg--input-large-height;
			line-height: $dg--input-large-height;
		}
		@include mq($medium) {
			font-size: $dg--font-medium;
			height: $dg--input-medium-height;
			line-height: $dg--input-medium-height;
		}
		@include mq($small) {
			font-size: $dg--font-small;
			height: $dg--input-small-height;
			line-height: $dg--input-small-height;
		}

        transition: $--border-transition-base;
        width: 100%;

        &::placeholder {
            color: $--input-placeholder-color;
        }

        &:hover {
            border-color: $--input-hover-border;
        }

        &:focus {
            outline: none;
            border-color: $--input-focus-border;
        }
    }

    @include e(suffix) {
        position: absolute;
        height: 100%;

        // add author: tangdm
        @include mq($large) {
            height: $dg--input-large-height;
        }
        @include mq($medium) {
            height: $dg--input-medium-height;
        }
        @include mq($small) {
            height: $dg--input-small-height;
        }

        // update author: tangdm [code] right: 5px;
        right: 4px;
        top: 0;
        text-align: center;
        color: $--input-icon-color;
        transition: all 0.3s;
        pointer-events: none;
    }

    @include e(suffix-inner) {
        pointer-events: all;
    }

    @include e(prefix) {
        position: absolute;
        height: 100%;

        // add author: tangdm
        @include mq($large) {
            height: $dg--input-large-height;
        }
        @include mq($medium) {
            height: $dg--input-medium-height;
        }
        @include mq($small) {
            height: $dg--input-small-height;
        }

        // update author: tangdm [code] left: 5px;
        left: 4px;
        top: 0;
        text-align: center;
        color: $--input-icon-color;
        transition: all 0.3s;
    }

    @include e(icon) {
        height: 100%;
        width: 25px;
        text-align: center;
        transition: all 0.3s;

		// update author: tangdm [code] line-height: $--input-height;
		@include mq($large) {
			line-height: $dg--input-large-height;
		}
		@include mq($medium) {
			line-height: $dg--input-medium-height;
		}
		@include mq($small) {
			line-height: $dg--input-small-height;
		}

        &:after {
            content: '';
            height: 100%;
            width: 0;
            display: inline-block;
            vertical-align: middle;
        }
    }

    @include e(validateIcon) {
        pointer-events: none;
    }

    @include when(active) {
        .el-input__inner {
            outline: none;
            border-color: $--input-focus-border;
        }
    }

    @include when(disabled) {
        .el-input__inner {
            background-color: $--input-disabled-fill;
            border-color: $--input-disabled-border;
            color: $--input-disabled-color;
            cursor: not-allowed;

            &::placeholder {
                color: $--input-disabled-placeholder-color;
            }
        }

        .el-input__icon {
            cursor: not-allowed;
        }
    }

    @include when(exceed) {
        .el-input__inner {
            border-color: $--color-danger;
        }

        .el-input__suffix {
            .el-input__count {
                color: $--color-danger;
            }
        }
    }

    // update author: tangdm [code] padding-right: 30px;
    @include m(suffix) {
        .el-input__inner {
            padding-right: 30px;
        }
    }

    // update author: tangdm [code] padding-left: 30px;
    @include m(prefix) {
        .el-input__inner {
            padding-left: 30px;
        }
    }

    // delete author: tangdm
    //@include m(medium) {
    //    font-size: $--input-medium-font-size;
    //
    //    @include e(inner) {
    //        height: $--input-medium-height;
    //        line-height: $--input-medium-height;
    //    }
    //
    //    .el-input__icon {
    //        line-height: $--input-medium-height;
    //    }
    //}
    //@include m(small) {
    //    font-size: $--input-small-font-size;
    //
    //    @include e(inner) {
    //        height: $--input-small-height;
    //        line-height: $--input-small-height;
    //    }
    //
    //    .el-input__icon {
    //        line-height: $--input-small-height;
    //    }
    //}
    //@include m(mini) {
    //    font-size: $--input-mini-font-size;
    //
    //    @include e(inner) {
    //        height: $--input-mini-height;
    //        line-height: $--input-mini-height;
    //    }
    //
    //    .el-input__icon {
    //        line-height: $--input-mini-height;
    //    }
    //}
}

@include b(input-group) {
    line-height: normal;
    display: inline-table;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;

    > .el-input__inner {
        vertical-align: middle;
        display: table-cell;
    }

    @include e((append, prepend)) {
        // update author:lutz [code] background-color: $--background-color-base;
        background-color: $--disabled-fill-base;

        // update author:lutz [code]  color: $--color-info;
        color: $--color-text-secondary;

        vertical-align: middle;
        display: table-cell;
        position: relative;
        border: $--border-base;
        border-radius: $--input-border-radius;
        padding: 0 20px;
        width: 1px;
        white-space: nowrap;

        &:focus {
            outline: none;
        }

        .el-select,
        .el-button {
            display: inline-block;
            margin: -10px -20px;
        }

        button.el-button,
        div.el-select .el-input__inner,
        div.el-select:hover .el-input__inner {
            border-color: transparent;
            background-color: transparent;
            color: inherit;
            border-top: 0;
            border-bottom: 0;
        }

        .el-button,
        .el-input {
            font-size: inherit;
        }
    }

    @include e(prepend) {
        border-right: 0;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    @include e(append) {
        border-left: 0;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    @include m(prepend) {
        .el-input__inner {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }
        .el-select .el-input.is-focus .el-input__inner {
            border-color: transparent;
        }
    }

    @include m(append) {
        .el-input__inner {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }
        .el-select .el-input.is-focus .el-input__inner {
            border-color: transparent;
        }
    }
}

/** disalbe default clear on IE */
.el-input__inner::-ms-clear {
    display: none;
    width: 0;
    height: 0;
}



// create author:lutz


@mixin genTheme($backgroundColorWeight, $borderColorWeight, $fontColorWeight, $iconColorWeight, $hoverColorWeight) {
	// update author: tangdm
	// [code] background-color: mix($--tag-primary-color, $--color-white, $backgroundColorWeight);
    // [code] border-color: mix($--tag-primary-color, $--color-white, $borderColorWeight);
	background-color: $dg--tag-background-color;
	border-color: $dg--tag-border-color;

	// update author: tangdm
	// [code] color: mix($--tag-primary-color, $--color-white, $fontColorWeight);
    color: $dg--tag-font-color;

    @include when(hit) {
        border-color: $--tag-primary-color;
    }

    .el-tag__close {
        // update author: tangdm [code]
        //color: mix($--tag-primary-color, $--color-white, $fontColorWeight);
        color: $--color-text-regular;
        &:hover {
            // update author: tangdm [code] color: $--color-white;
            color: $--color-text-primary;

            // delete author: tangdm
            // background-color: mix($--tag-primary-color, $--color-white, $hoverColorWeight);
        }
    }

    // create author:lutz
    &.el-tag--primary {
        background-color: rgba($--tag-primary-color, $backgroundColorWeight);
        border-color: rgba($--tag-primary-color, $borderColorWeight);
        color: mix($--tag-primary-color, $--color-white, $fontColorWeight);

        @include when(hit) {
            border-color: $--tag-primary-color;
        }

        .el-tag__close {
            color: mix($--tag-primary-color, $--color-white, $iconColorWeight);
            &:hover {
                color: mix($--tag-primary-color, $--color-white, $hoverColorWeight);
            }
        }
    }

    &.el-tag--info {
        // update author: tangdm [code] background-color: background-color: mix($--tag-info-color, $--color-white, $backgroundColorWeight);
        background-color: rgba($--tag-info-color, $backgroundColorWeight);

        // update author: tangdm [code] border-color: mix($--tag-info-color, $--color-white, $borderColorWeight);
        border-color: rgba($--tag-info-color, $borderColorWeight);
        color: mix($--tag-info-color, $--color-white, $fontColorWeight);

        @include when(hit) {
            border-color: $--tag-info-color;
        }

        .el-tag__close {
            // update author: tangdm [code]
            //color: mix($--tag-info-color, $--color-white, $fontColorWeight);
            //&:hover {
            //    color: $--color-white;
            //    background-color: mix($--tag-info-color, $--color-white, $hoverColorWeight);
            //}
            color: mix($--tag-info-color, $--color-white, $iconColorWeight);
            &:hover {
                color: mix($--tag-info-color, $--color-white, $hoverColorWeight);
            }
        }
    }

    &.el-tag--success {
        // update author: tangdm [code] background-color: mix($--tag-success-color, $--color-white, $backgroundColorWeight);
        background-color: rgba($--tag-success-color, $backgroundColorWeight);

        // update author: tangdm [code] border-color: mix($--tag-success-color, $--color-white, $borderColorWeight);
        border-color: rgba($--tag-success-color, $borderColorWeight);
        color: mix($--tag-success-color, $--color-white, $fontColorWeight);

        @include when(hit) {
            border-color: $--tag-success-color;
        }

        .el-tag__close {
            // update author: tangdm [code]
            //color: mix($--tag-success-color, $--color-white, $fontColorWeight);
            //&:hover {
            //    color: $--color-white;
            //    background-color: mix($--tag-success-color, $--color-white, $hoverColorWeight);
            //}
            color: mix($--tag-success-color, $--color-white, $iconColorWeight);
            &:hover {
                color: mix($--tag-success-color, $--color-white, $hoverColorWeight);
            }
        }
    }

    &.el-tag--warning {
        // update author: tangdm [code] background-color: mix($--tag-warning-color, $--color-white, $backgroundColorWeight);
        background-color: rgba($--tag-warning-color, $backgroundColorWeight);

        // update author: tangdm [code] border-color: mix($--tag-warning-color, $--color-white, $borderColorWeight)
        border-color: rgba($--tag-warning-color, $borderColorWeight);
        color: mix($--tag-warning-color, $--color-white, $fontColorWeight);

        @include when(hit) {
            border-color: $--tag-warning-color;
        }

        .el-tag__close {
            // update author: tangdm [code]
            //color: mix($--tag-warning-color, $--color-white, $fontColorWeight);
            //&:hover {
            //    color: $--color-white;
            //    background-color: mix($--tag-warning-color, $--color-white, $hoverColorWeight);
            //}
            color: mix($--tag-warning-color, $--color-white, $iconColorWeight);
            &:hover {
                color: mix($--tag-warning-color, $--color-white, $hoverColorWeight);
            }
        }
    }

    &.el-tag--danger {
        // update author: tangdm [code] background-color: mix($--tag-danger-color, $--color-white, $backgroundColorWeight);
        background-color: rgba($--tag-danger-color, $backgroundColorWeight);

        // update author: tangdm [code] border-color: mix($--tag-danger-color, $--color-white, $borderColorWeight);
        border-color: rgba($--tag-danger-color, $borderColorWeight);
        color: mix($--tag-danger-color, $--color-white, $fontColorWeight);

        @include when(hit) {
            border-color: $--tag-danger-color;
        }

        .el-tag__close {
            // update author: tangdm [code]
            //color: mix($--tag-danger-color, $--color-white, $fontColorWeight);
            //&:hover {
            //    color: $--color-white;
            //    background-color: mix($--tag-danger-color, $--color-white, $hoverColorWeight);
            //}
            color: mix($--tag-danger-color, $--color-white, $iconColorWeight);
            &:hover {
                color: mix($--tag-danger-color, $--color-white, $hoverColorWeight);
            }
        }
    }
}

@include b(tag) {
    // update author: tangdm [code] @include genTheme(10%, 20%, 100%, 100%);
    @include genTheme(0.08, 0.4, 100%, 60%, 100%);

    // create author:lutz describe:将设置背景色为透明
    //background-color: transparent;

    display: inline-block;
	// update author: tangdm [code] height: 32px; line-height: 30px;  font-size: $--tag-font-size; padding: $--tag-padding;
    height: $dg--tag-small-height;
    line-height: $dg--tag-small-height - 2;
    font-size: $--tag-font-size;
    padding: 0 12px;

    border-width: 1px;
    border-style: solid;
    border-radius: $--tag-border-radius;
    box-sizing: border-box;
    white-space: nowrap;

    .el-icon-close {
        display: inline-block;
        text-align: center;
        position: relative;
        cursor: pointer;
        font-size: 12px;
        margin-left: 2px;

        // delete author: tangdm [code]
        // top: -1px; right: -5px;
        // width: 16px; height: 16px; line-height: 16px;
        // border-radius: 50%;

        // update author: tangdm [code] vertical-align: middle;
        vertical-align: baseline;

        &::before {
            display: block;
        }
    }

    @include m(dark) {
        // update author: tangdm [code] @include genTheme(100%, 100%, 0, 0.8);
        @include genTheme(1, 1, 0, 45%, 0);
    }

    @include m(plain) {
        // update author: tangdm [code]
        @include genTheme(0, 1, 100%, 60%, 100%);
    }


    @include m(medium) {
        // update author:lutz [code] height: 28px;
        height: $dg--tag-medium-height;
        // update author:lutz [code] line-height: 26px
        line-height: $dg--tag-medium-height - 2;
        // create author:lutz
        font-size: $dg--tag-medium-font-size;

        // delete author: tangdm
        //.el-icon-close {
        //    transform: scale(0.8);
        //}
    }

    @include m(small) {
        // update author:lutz [code] height: 24px;
        height: $dg--tag-small-height;
        // update author:lutz [code] padding: 0 8px;
        padding: $--tag-padding;
        // update author:lutz [code] line-height: 22px
        line-height: $dg--tag-small-height - 2;
        // create author:lutz
        font-size: $dg--tag-small-font-size;

        // delete author: tangdm
        //.el-icon-close {
        //    transform: scale(0.8);
        //}
    }

    @include m(mini) {
        // update author:lutz [code] height: 20px;
        height: $dg--tag-mini-height;
        // update author:lutz [code] padding: 0 5px;
        padding: $--tag-padding;
        // update author:lutz [code] line-height: 19px;
        line-height: $dg--tag-mini-height - 2;
        // create author:lutz
        font-size: $dg--tag-mini-font-size;

        // delete author: tangdm
        //.el-icon-close {
        //    margin-left: -3px;
        //    transform: scale(0.7);
        //}
    }
}




@include b(select-dropdown) {
    @include e(item) {
        padding: 0 20px;
        position: relative;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: $--select-option-color;
        box-sizing: border-box;
        cursor: pointer;
		//font-size: $--select-font-size;
		//height: $--select-option-height;
		//line-height: $--select-option-height;

        // update author: tangdm [code] font-size: $--select-font-size; height: $--select-option-height; line-height: $--select-option-height;
        @include mq($large) {
			font-size: $dg--font-large;
            height: $dg--input-large-height;
            line-height: $dg--input-large-height;
        }
        @include mq($medium) {
			font-size: $dg--font-medium;
            height: $dg--input-medium-height;
            line-height: $dg--input-medium-height;
        }
        @include mq($small) {
			font-size: $dg--font-small;
            height: $dg--input-small-height;
            line-height: $dg--input-small-height;
        }

        @include when(disabled) {
            color: $--select-option-disabled-color;
            cursor: not-allowed;

            &:hover {
                background-color: $--color-white;
            }
        }

        &.hover,
        &:hover {
            background-color: $--select-option-hover-background;
        }

        &.selected {
            color: $--select-option-selected-font-color;
            font-weight: bold;
        }
    }
}




@include b(select-group) {
  $gap: 20px;

  margin: 0;
  padding: 0;

  @include e(wrap) {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;

    &:not(:last-of-type) {
      padding-bottom: 24px;

      &::after {
        content: '';
        position: absolute;
        display: block;
        left: $gap;
        right: $gap;
        bottom: 12px;
        height: 1px;
        background: $--border-color-light;
      }
    }
  }

  @include e(title) {
    padding-left: $gap;
    font-size: $--select-group-font-size;
    color: $--select-group-color;
    line-height: $--select-group-height;
  }

  & .el-select-dropdown__item {
    padding-left: $gap;
  }
}





@include b(scrollbar) {
    // add author:tangdm descript: 继承容器宽高
    width: 100%;
    height: 100%;

    overflow: hidden;
    position: relative;

    &:hover,
    &:active,
    &:focus {
        > .el-scrollbar__bar {
            opacity: 1;
            transition: opacity 340ms ease-out;
        }
    }
    // add author:tangdm
    .dg-scroll-content {
        @include mq($large) {
            font-size: $dg--font-large;
        }
        @include mq($medium) {
            font-size: $dg--font-medium;
        }
        @include mq($small) {
            font-size: $dg--font-small;
        }
        color: $--color-text-primary;
    }

    @include e(wrap) {
        overflow: scroll;
        // add author:tangdm descript: 修正宽度距离
        width: calc(100% + 17px);
        // update author:tangdm [code] height: 100%;
        height: calc(100% + 17px);
        @include m(hidden-default) {
            // create-start author:tangdm
            width: 100%;
            height: 100%;
            overflow: scroll;
            // create-end

            &::-webkit-scrollbar {
                width: 0;
                height: 0;
            }
        }
    }

    @include e(thumb) {
        position: relative;
        display: block;
        width: 0;
        height: 0;
        cursor: pointer;
        border-radius: inherit;
        background-color: $--scrollbar-background-color;
        transition: 0.3s background-color;

        &:hover {
            background-color: $--scrollbar-hover-background-color;
        }
    }

    @include e(bar) {
        position: absolute;
        // update author: tangdm descript: 设计调整了间距
        right: 4px;
        bottom: 4px;
        // update end

        // [code] right: 2px;  bottom: 2px;
        z-index: 1;
        border-radius: 4px;
        opacity: 0;
        transition: opacity 120ms ease-out;

        @include when(vertical) {
            width: 6px;
            top: 2px;

            > div {
                width: 100%;
            }
        }

        @include when(horizontal) {
            height: 6px;
            left: 2px;

            > div {
                height: 100%;
            }
        }
    }
}

// add author: tangdm cascader 兼容性问题调整
@include b(cascader) {
    @include e(dropdown) {
        .el-scrollbar {
            width: auto;
        }
        .el-scrollbar__wrap {
            width: auto;
        }
    }
}



@include b(select) {
    display: inline-block;
    position: relative;

    // create-start author:lutz describe:让 font icon 跟随父元素变化
    & .el-select__caret.el-input__icon.el-icon-arrow-up {
        font-size: inherit;
        // line-height: 100%;
    }

    .el-select__tags > span {
        display: contents;
    }

    &:hover {
        .el-input__inner {
            border-color: $--select-border-color-hover;
        }
    }

    .el-input__inner {
        cursor: pointer;
        padding-right: 35px;

        &:focus {
            border-color: $--select-input-focus-border-color;
        }
    }

    .el-input {
        & .el-select__caret {
            color: $--select-input-color;
            font-size: $--select-input-font-size;
            transition: transform 0.3s;
            transform: rotateZ(180deg);
            cursor: pointer;

            @include when(reverse) {
                transform: rotateZ(0deg);
            }

            @include when(show-close) {
                font-size: $--select-font-size;
                text-align: center;
                transform: rotateZ(180deg);
                border-radius: $--border-radius-circle;
                color: $--select-input-color;
                transition: $--color-transition-base;

                &:hover {
                    color: $--select-close-hover-color;
                }
            }
        }

        &.is-disabled {
            & .el-input__inner {
                cursor: not-allowed;

                &:hover {
                    border-color: $--select-disabled-border;
                }
            }
        }

        &.is-focus .el-input__inner {
            border-color: $--select-input-focus-border-color;
        }
    }

    > .el-input {
        display: block;
    }

    @include e(input) {
        border: none;
        outline: none;
        padding: 0;
        margin-left: 15px;
        color: $--select-multiple-input-color;
        font-size: $--select-font-size;
        appearance: none;

        // delete author: tangdm [code] height: 28px;
        @include mq($large) {
            height: $dg--height-large;
        }
        @include mq($medium) {
            height: $dg--height-medium;
        }
        @include mq($small) {
            height: $dg--height-small;
        }

        background-color: transparent;
        @include when(mini) {
            height: 14px;
        }
    }

    @include e(close) {
        cursor: pointer;
        position: absolute;
        top: 8px;
        z-index: $--index-top;
        right: 25px;
        color: $--select-input-color;
        line-height: 18px;
        font-size: $--select-input-font-size;

        &:hover {
            color: $--select-close-hover-color;
        }
    }

    @include e(tags) {
        position: absolute;
        line-height: normal;
        white-space: normal;
        z-index: $--index-normal;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        align-items: center;
        flex-wrap: wrap;
    }

    .el-tag__close {
        margin-top: -2px;
    }

    .el-tag {
        box-sizing: border-box;
        border-color: transparent;
        margin: 2px 0 2px 2px;

        // update author:lutz [code] background-color: #f0f2f5;
        //background-color: #f1f1f1;

        &__close.el-icon-close {
            background-color: $--color-text-placeholder;
            // delete author: tangdm [code]
            //right: -7px;
            //top: 0;
            top: -1px;
            color: $--color-white;

            &:hover {
                background-color: $--color-text-secondary;
            }

            &::before {
                display: block;
                transform: translate(0, 0.5px);
            }
        }
    }
}


@include b(pagination) {
    white-space: nowrap;
    color: $--pagination-font-color;

	// update author: tangdm [code] padding: 2px 5px;
	padding: 2px 0;

	// delete author: tangdm
	//font-weight: bold;
    @include utils-clearfix;

    span:not([class*='suffix']),
    button {
        display: inline-block;
        // update author: tangdm [code] font-size: $--pagination-font-size;
        @include mq($large) {
            font-size: $dg--font-large;
        }
        @include mq($medium) {
            font-size: $dg--font-medium;
        }
        @include mq($small) {
            font-size: $dg--font-small;
        }

		// delete author: tangdm
		//min-width: $--pagination-button-width;

        height: $--pagination-button-height;
        line-height: $--pagination-button-height;
        vertical-align: top;
        box-sizing: border-box;
    }

    // add author: tangdm
    .el-input__suffix {
        @include mq($large) {
            height: 30px;
        }
        @include mq($medium) {
            height: 28px;
        }
        @include mq($small) {
            height: 24px;
        }
    }

    .el-input__inner {
        text-align: center;
        -moz-appearance: textfield;
        line-height: 24px;
        // add author: tangdm
        height: 24px;
    }

    // add author: tangdm
    // .el-input__icon {
    //     line-height: 24px;
    // }

    // pagesize 的下拉 icon
    .el-input__suffix {
		// update author: tangdm [code] right: 0; transform: scale(0.8);
        right: 0;
        transform: scale(1);
    }

    .el-select .el-input {
        width: 100px;
        margin: 0 5px;

        .el-input__inner {
            padding-right: 25px;
            border-radius: $--pagination-border-radius;
        }
    }

    button {
        border: none;
        padding: 0 6px;
        background: transparent;

        &:focus {
            outline: none;
        }

        &:hover {
            color: $--pagination-hover-color;
        }

        &:disabled {
            color: $--pagination-button-disabled-color;
            background-color: $--pagination-button-disabled-background-color;
            cursor: not-allowed;
        }
    }

    .btn-prev,
    .btn-next {
        background: center center no-repeat;
        background-size: 16px;
        background-color: $--pagination-background-color;
        cursor: pointer;
        margin: 0;
        color: $--pagination-button-color;

        .el-icon {
            display: block;
            font-size: 12px;
            font-weight: bold;
        }
    }

    .btn-prev {
		// update author: tangdm [code] padding-right: 12px;
        padding-right: 10px;
    }

    .btn-next {
		// update author: tangdm [code] padding-left: 12px;
        padding-left: 10px;
    }

    .el-pager li.disabled {
        color: $--color-text-placeholder;
        cursor: not-allowed;
    }

    @include m(small) {
        .btn-prev,
        .btn-next,
        .el-pager li,
        .el-pager li.btn-quicknext,
        .el-pager li.btn-quickprev,
        .el-pager li:last-child {
            border-color: transparent;
            font-size: 12px;
            line-height: 22px;
            height: 22px;
            min-width: 22px;
        }

        .arrow.disabled {
            visibility: hidden;
        }

        .more::before,
        li.more::before {
            line-height: 24px;
        }

        span:not([class*='suffix']),
        button {
            height: 22px;
            line-height: 22px;
        }

        @include e(editor) {
            height: 22px;
            &.el-input .el-input__inner {
                height: 22px;
            }
        }
    }

    @include e(sizes) {
        margin: 0 10px 0 0;
        font-weight: normal;
        color: $--color-text-regular;

        .el-input .el-input__inner {
            // delete author: tangdm
            //font-size: $--pagination-font-size;
            //padding-left: 8px;

            &:hover {
                border-color: $--pagination-hover-color;
            }
        }
    }

    @include e(total) {
        margin-right: 10px;
        font-weight: normal;

		// update author: tangdm [code] color: $--color-text-regular;
        color: $--pagination-font-color;
    }

    @include e(jump) {
		// update author: tangdm [code]  margin-left: 24px; color: $--color-text-regular;
        margin-left: 14px;
        color: $--pagination-font-color;

        font-weight: normal;
        .el-input__inner {
            padding: 0 3px;
        }
    }

    @include e(rightwrapper) {
        float: right;
    }

    @include e(editor) {
        line-height: 18px;
        padding: 0 2px;
        height: $--pagination-button-height;

        text-align: center;
        margin: 0 2px;
        box-sizing: border-box;
        border-radius: $--pagination-border-radius;

        &.el-input {
			// update author: tangdm width: 50px;
            width: 30px;

			// add author: tangdm
			margin: 0 8px;
			box-sizing: border-box;
        }

        &.el-input .el-input__inner {
			// add author: tangdm
			width: 30px;

			// update author: tangdm [code] height: $--pagination-button-height;
            height: 24px;
        }

        .el-input__inner::-webkit-inner-spin-button,
        .el-input__inner::-webkit-outer-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
    }

    @include when(background) {
        .btn-prev,
        .btn-next,
        .el-pager li {
			// delete author: tangdm
			//background-color: $--color-info-lighter;
            color: $--color-text-regular;
			border-radius: 2px;

			// update author: tangdm [code] margin: 0 5px;
			margin: 0 4px;

			// add author: tangdm
			width: 30px;
			line-height: 28px;
			padding: 0;
			text-align: center;
			box-sizing: border-box;
			border: $--radio-input-border;

			// delete author: tangdm
			//min-width: 30px;

            &.disabled {
                color: $--color-text-placeholder;
            }
        }

        .btn-prev,
        .btn-next {
            padding: 0;

            &:disabled {
                color: $--color-text-placeholder;
            }
        }

        .el-pager li:not(.disabled) {
            &:hover {
                color: $--pagination-hover-color;
            }

            &.active {
				// delete author: tangdm
				//background-color: $--color-primary;

				// update author: tangdm [code] color: $--color-white;
                color: $--color-primary;

				// add author: tangdm
				border-color: $--color-primary;
            }
        }

        &.el-pagination--small {
            .btn-prev,
            .btn-next,
            .el-pager li {
                margin: 0 3px;
                min-width: 22px;
            }
        }
    }
}

@include b(pager) {
    user-select: none;
    list-style: none;
    display: inline-block;
    vertical-align: top;
    font-size: 0;
    padding: 0;
    margin: 0;

    .more::before {
        line-height: 30px;
    }

    li {
		// update author: tangdm [code] padding: 0 4px;
        padding: 0 6px;
        background: $--pagination-background-color;
        vertical-align: top;
        display: inline-block;

        // update author: tangdm [code] font-size: $--pagination-font-size;
        font-size: $--pagination-font-size;
        @include mq($small) {
            font-size: $dg--font-small;
        }

		// delete author: tangdm
		//min-width: $--pagination-button-width;
        height: $--pagination-button-height;
        line-height: $--pagination-button-height;
        cursor: pointer;
        box-sizing: border-box;
        text-align: center;
        margin: 0;

        &.btn-quicknext,
        &.btn-quickprev {
            line-height: 28px;
            color: $--pagination-button-color;

            &.disabled {
                color: $--color-text-placeholder;
            }
        }

        &.btn-quickprev:hover {
            cursor: pointer;
        }

        &.btn-quicknext:hover {
            cursor: pointer;
        }

        &.active + li {
            border-left: 0;
        }

        &:hover {
            color: $--pagination-hover-color;
        }

        &.active {
            color: $--pagination-hover-color;
            cursor: default;
        }
    }
}







.v-modal-enter {
    animation: v-modal-in 0.2s ease;
}

.v-modal-leave {
    animation: v-modal-out 0.2s ease forwards;
}

@keyframes v-modal-in {
    0% {
        opacity: 0;
    }
    100% {
    }
}

@keyframes v-modal-out {
    0% {
    }
    100% {
        opacity: 0;
    }
}

.v-modal {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: $--popup-modal-opacity;
    background: $--popup-modal-background-color;
}

@include b(popup-parent) {
    @include m(hidden) {
        overflow: hidden;
    }
}



@include b(dialog) {
    position: relative;
    margin: 0 auto 50px;
    background: $--dialog-background-color;
    border-radius: $--border-radius-small;
    box-shadow: $--dialog-box-shadow;
    box-sizing: border-box;
    width: 50%;

    @include when(fullscreen) {
        width: 100%;
        margin-top: 0;
        margin-bottom: 0;
        height: 100%;
        overflow: auto;
    }

    @include e(wrapper) {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        overflow: auto;
        margin: 0;
    }

    @include e(header) {
        padding: $--dialog-padding-primary;
        padding-bottom: 10px;
    }

    @include e(headerbtn) {
        position: absolute;

        // update author: tangdm [code] top: $--dialog-padding-primary; right: $--dialog-padding-primary;
        @include mq($large) {
            top: $dg--dialog-header-padding-top-large;
            right: 2 * $dg--rem-large;
        }
        @include mq($medium) {
            top: $dg--dialog-header-padding-top-medium;
            right: 2 * $dg--rem-medium;
        }
        @include mq($small) {
            top: $dg--dialog-header-padding-top-small;
            right: 2 * $dg--rem-small;
        }

        padding: 0;
        background: transparent;
        border: none;
        outline: none;
        cursor: pointer;
        font-size: $--message-close-size;

        .el-dialog__close {
            // update author: tangdm [code] color: $--color-info;
            color: $--message-close-icon-color;
        }

        &:focus,
        &:hover {
            .el-dialog__close {
                // update author: tangdm [code] color: $--color-primary;
                color: $--message-close-hover-color;
            }
        }
    }

    @include e(title) {
        color: $--color-text-primary;

        // update author: tangdm [code] font-size: $--dialog-title-font-size; line-height: $--dialog-font-line-height;
        @include mq($large) {
            font-size: $dg--title-font-large;
            line-height: $dg--title-font-large;
        }
        @include mq($medium) {
            font-size: $dg--title-font-medium;
            line-height: $dg--title-font-medium;
        }
        @include mq($small) {
            font-size: $dg--title-font-small;
            line-height: $dg--title-font-small;
        }

        // add author: tangdm
        font-weight: bold;
    }

    @include e(body) {
        padding: 30px 20px;
        color: $--color-text-regular;
        font-size: $--dialog-content-font-size;
        word-break: break-all;
    }

    @include e(footer) {
        padding: $--dialog-padding-primary;
        padding-top: 10px;
        text-align: right;
        box-sizing: border-box;
    }

    // 内容居中布局
    @include m(center) {
        text-align: center;

        @include e(body) {
            text-align: initial;
            padding: 25px ($--dialog-padding-primary + 5px) 30px;
        }

        @include e(footer) {
            text-align: inherit;
        }
    }
}

.dialog-fade-enter-active {
    animation: dialog-fade-in 0.3s;
}

.dialog-fade-leave-active {
    animation: dialog-fade-out 0.3s;
}

@keyframes dialog-fade-in {
    0% {
        transform: translate3d(0, -20px, 0);
        opacity: 0;
    }
    100% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

@keyframes dialog-fade-out {
    0% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
    100% {
        transform: translate3d(0, -20px, 0);
        opacity: 0;
    }
}








@include b(autocomplete) {
  position: relative;
  display: inline-block;
}

@include b(autocomplete-suggestion) {
  margin: 5px 0;
  box-shadow: $--box-shadow-light;
  border-radius: $--border-radius-base;
  border: 1px solid $--border-color-light;
  box-sizing: border-box;
  background-color: $--color-white;

  @include e(wrap) {
    max-height: 280px;
    padding: 10px 0;
    box-sizing: border-box;
  }

  @include e(list) {
    margin: 0;
    padding: 0;
  }

  & li {
    padding: 0 20px;
    margin: 0;
    line-height: 34px;
    cursor: pointer;
    color: $--color-text-regular;
    font-size: $--font-size-base;
    list-style: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    &:hover {
      background-color: $--select-option-hover-background;
    }

    &.highlighted {
      background-color: $--select-option-hover-background;
    }

    &.divider {
      margin-top: 6px;
      border-top: 1px solid $--color-black;
    }

    &.divider:last-child {
      margin-bottom: -6px;
    }
  }

  @include when(loading) {
    li {
      text-align: center;
      height: 100px;
      line-height: 100px;
      font-size: 20px;
      color: #999;
      @include utils-vertical-center;

      &:hover {
        background-color: $--color-white;
      }
    }

    & .el-icon-loading {
      vertical-align: middle;
    }
  }
}



@charset "UTF-8";


@mixin button-plain($color) {
  color: $color;
  background: mix($--color-white, $color, 90%);
  border-color: mix($--color-white, $color, 60%);

  // delete author: tangdm descript: remove the focus status [code] &:focus
  &:hover {
    background: $color;
    border-color: $color;
    color: $--color-white;
  }

  &:active {
    background: mix($--color-black, $color, $--button-active-shade-percent);
    border-color: mix($--color-black, $color, $--button-active-shade-percent);
    color: $--color-white;
    outline: none;
  }

  &.is-disabled {
    &,
    &:hover,
    &:focus,
    &:active {
      color: mix($--color-white, $color, 40%);
      background-color: mix($--color-white, $color, 90%);
      border-color: mix($--color-white, $color, 80%);
    }
  }
}

@mixin button-variant($color, $background-color, $border-color) {
  color: $color;
  background-color: $background-color;
  border-color: $border-color;

  &:hover {
    background: mix($--color-white, $background-color, $--button-hover-tint-percent);
    border-color: mix($--color-white, $border-color, $--button-hover-tint-percent);
    color: $color;
  }
  
  &:active {
    background: mix($--color-black, $background-color, $--button-active-shade-percent);
    border-color: mix($--color-black, $border-color, $--button-active-shade-percent);
    color: $color;
    outline: none;
  }

  &.is-active {
    background: mix($--color-black, $background-color, $--button-active-shade-percent);
    border-color: mix($--color-black, $border-color, $--button-active-shade-percent);
    color: $color;
  }

  &.is-disabled {
    &,
    &:hover,
    &:focus,
    &:active {
      color: $--color-white;
      background-color: mix($background-color, $--color-white);
      border-color: mix($border-color, $--color-white);
    }
  }

  &.is-plain {
    @include button-plain($background-color);
  }
}

@mixin button-size($padding-vertical, $padding-horizontal, $font-size, $border-radius) {
  padding: $padding-vertical $padding-horizontal;
  font-size: $font-size;
  border-radius: $border-radius;
  &.is-round {
    padding: $padding-vertical $padding-horizontal;
  }
}



// create author:lutz


@include b(button) {
    // create author:lutz describe: content-height 内容高度会超出1px
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    background: $--button-default-background-color;
    border: $--border-base;
    border-color: $--button-default-border-color;
    color: $--button-default-font-color;
    -webkit-appearance: none;
    text-align: center;
    box-sizing: border-box;
    outline: none;
    margin: 0;
    transition: 0.1s;
    font-weight: $--button-font-weight;
    @include utils-user-select(none);
    & + & {
        // update author: tangdm [code] margin-left: 10px;
        margin-left: 5px;
    }

	// update author: tangdm [code] height: $dg--button-small-height;
	//@include button-size(
	//	$--button-padding-vertical,
	//	$--button-padding-horizontal,
	//	$--button-font-size,
	//	$--button-border-radius
	//);

	@include mq($large) {
        min-width: $dg--button-small-min-width;
		height: $dg--button-media-large-height;
		@include button-size(
			$dg--button-large-padding-vertical,
            $dg--rem-large,
			$dg--font-large,
			$--button-border-radius
		);
	}
	@include mq($medium) {
        min-width: $dg--button-small-min-width - 12;
		height: $dg--button-media-medium-height;
		@include button-size(
			$dg--button-medium-padding-vertical,
            $dg--rem-medium,
			$dg--font-medium,
			$--button-border-radius
		);
	}
	@include mq($small) {
        min-width: $dg--button-small-min-width - 24;
		height: $dg--button-media-small-height;
		@include button-size(
			$dg--button-small-padding-vertical,
            $dg--rem-small,
			$dg--font-small,
			$--button-border-radius
		);
	}

    // delete author: tangdm descript: remove the focus status [code] &:focus
    &:hover {
        color: $--color-primary;
        border-color: $--color-primary-light-7;
        background-color: $--color-primary-light-9;
    }

    &:active {
        color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
        border-color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
        outline: none;
    }

    &::-moz-focus-inner {
        border: 0;
    }


    & [class*='el-icon-'] {
        // create author:lutz describe:medium-icon-size 14px
        font-size: $dg--button-small-icon-size;
        & + span {
            // update author: tangdm [code] margin-left: 5px;
            margin-left: 8px;
        }
    }

    // create author: tangdm descript: margin-right span
    & span + [class*='el-icon-'] {
        margin-left: 5px;
    }

    @include when(plain) {

        // delete author: tangdm descript: remove the focus status [code] &:focus
        &:hover {
            background: $--color-white;
            border-color: $--color-primary;
            color: $--color-primary;
        }

        &:active {
            background: $--color-white;
            border-color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
            color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
            outline: none;
        }
    }

    @include when(active) {
        color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
        border-color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
    }

    @include when(loading) {
        position: relative;
        pointer-events: none;

        &:before {
            pointer-events: none;
            content: '';
            position: absolute;
            left: -1px;
            top: -1px;
            right: -1px;
            bottom: -1px;
            border-radius: inherit;
            background-color: rgba(255, 255, 255, 0.35);
        }
    }

    @include when(round) {
        border-radius: 20px;

        // update author:lutz [code] padding: 12px 23px;
		// delete author:tangdm
        //padding: $--button-padding-vertical $--button-padding-horizontal;
    }

    @include when(circle) {
        min-width: auto;
		height: auto;
        border-radius: 50%;
        padding: $--button-padding-vertical;
    }

    @include m(primary) {
        @include button-variant(
            $--button-primary-font-color,
            $--button-primary-background-color,
            $--button-primary-border-color
        );
    }
    @include m(success) {
        @include button-variant(
            $--button-success-font-color,
            $--button-success-background-color,
            $--button-success-border-color
        );
    }
    @include m(warning) {
        @include button-variant(
            $--button-warning-font-color,
            $--button-warning-background-color,
            $--button-warning-border-color
        );
    }
    @include m(danger) {
        @include button-variant(
            $--button-danger-font-color,
            $--button-danger-background-color,
            $--button-danger-border-color
        );
    }
    @include m(info) {
        @include button-variant(
            $--button-info-font-color,
            $--button-info-background-color,
            $--button-info-border-color
        );
		//&.is-plain {
		//	color: $--color-primary;
		//	background: $dg--button-info-background;
		//	border-color: $dg--button-info-border-color;
		//}
    }

    // update author:lutz describe:修改了顺序
    @include when(disabled) {
        // create-satrt author:lutz
        color: $--button-disabled-font-color;
        background-color: $--button-disabled-background-color;
        border-color: $--button-disabled-border-color;

        &.is-plain {
            background-color: $--button-disabled-background-color !important;
        }
        // create-end

        // delete author: tangdm descript: remove the focus status [code] &:focus
        &,
        &:hover {
            color: $--button-disabled-font-color;
            cursor: not-allowed;
            background-image: none;
            background-color: $--button-disabled-background-color;
            border-color: $--button-disabled-border-color;
        }

        &.el-button--text {
            background-color: transparent;

            // create author:lutz
            border-color: transparent;
        }

        &.is-plain {
            // delete author: tangdm descript: remove the focus status [code] &:focus
            &,
            &:hover {
                background-color: $--color-white;
                border-color: $--button-disabled-border-color;
                color: $--button-disabled-font-color;
            }
        }
    }

    @include m(medium) {
        // create author:lutz describe: content-height 内容高度会超出1px
        // update author: tangdm descipt: 不同尺寸也做自适应 [code] height: $dg--button-medium-height;
        @include mq($large) {
            min-width: $dg--button-medium-min-width;
            height: $dg--button-medium-height;
            @include button-size(
                $--button-medium-padding-vertical,
                $--button-medium-padding-horizontal,
                $--button-medium-font-size,
                $--button-medium-border-radius
            );
        }
        @include mq($medium) {
            min-width: $dg--button-medium-min-width - 12;
            height: $dg--button-medium-height - 4;
            @include button-size(
                $--button-medium-padding-vertical - 2,
                $--button-medium-padding-horizontal,
                $--button-medium-font-size,
                $--button-medium-border-radius
            );
        }
        @include mq($small) {
            min-width: $dg--button-medium-min-width - 24;
            height: $dg--button-medium-height - 8;
            @include button-size(
                $--button-medium-padding-vertical - 4,
                $--button-medium-padding-horizontal,
                $--button-medium-font-size,
                $--button-medium-border-radius
            );
        }

        @include when(circle) {
            padding: $--button-medium-padding-vertical;
        }

        // create author:lutz describe:medium-icon-size 16px
        & [class*='el-icon-'] {
            font-size: $dg--button-medium-icon-size;
        }
    }

    @include m(small) {
		// create author:lutz describe: content-height 内容高度会超出1px
        // update author: tangdm descipt: 不同尺寸也做自适应 [code] height: $dg--button-small-height;
        @include mq($large) {
            min-width: $dg--button-small-min-width;
            height: $dg--button-small-height;
            @include button-size(
                $--button-small-padding-vertical,
                $--button-small-padding-horizontal,
                $--button-small-font-size,
                $--button-small-border-radius
            );
        }
        @include mq($medium) {
            min-width: $dg--button-small-min-width - 12;
            height: $dg--button-small-height - 4;
            @include button-size(
                $--button-small-padding-vertical - 2,
                $--button-small-padding-horizontal,
                $--button-small-font-size,
                $--button-small-border-radius
            );
        }
        @include mq($small) {
            min-width: $dg--button-small-min-width - 24;
            height: $dg--button-small-height - 8;
            @include button-size(
                $--button-small-padding-vertical - 4,
                $--button-small-padding-horizontal,
                $--button-small-font-size,
                $--button-small-border-radius
            );
        }

        @include when(circle) {
            padding: $--button-small-padding-vertical;
        }
    }

    @include m(mini) {
        // create author:lutz describe: content-height 内容高度会超出1px
        // update author: tangdm descipt: 不同尺寸也做自适应 [code] height: $dg--button-mini-height;
        @include mq($large) {
            min-width: $dg--button-mini-min-width;
            height: $dg--button-mini-height;
            @include button-size(
                $--button-mini-padding-vertical,
                $--button-mini-padding-horizontal,
                $--button-mini-font-size,
                $--button-mini-border-radius
            );
        }
        @include mq($medium) {
            min-width: $dg--button-mini-min-width - 12;
            height: $dg--button-mini-height - 4;
            @include button-size(
                $--button-mini-padding-vertical - 2,
                $--button-mini-padding-horizontal,
                $--button-mini-font-size,
                $--button-mini-border-radius
            );
        }
        @include mq($small) {
            min-width: $dg--button-mini-min-width - 24;
            height: $dg--button-mini-height - 8;
            @include button-size(
                $--button-mini-padding-vertical - 4,
                $--button-mini-padding-horizontal,
                $--button-mini-font-size,
                $--button-mini-border-radius
            );
        }

        @include when(circle) {
            padding: $--button-mini-padding-vertical;
        }

        // create author:lutz describe:mini-icon-size 12px;
        & [class*='el-icon-'] {
            font-size: $dg--button-mini-icon-size;
        }
    }

    @include m(text) {
        border-color: transparent;
        color: $--color-primary;
        background: transparent;
        padding-left: 0;
        padding-right: 0;
        min-width: auto;

        + .el-button--text {
            margin-left: 4px;
        }

        // delete author: tangdm descript: remove the focus status [code] &:focus
        &:hover {
            color: mix($--color-white, $--color-primary, $--button-hover-tint-percent);
            border-color: transparent;
            background-color: transparent;
        }

        &:active {
            color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
            border-color: transparent;
            background-color: transparent;
        }

        // delete author: tangdm descript: remove the focus status [code] &:focus
        &.is-disabled,
        &.is-disabled:hover,
        &.is-disabled:active {
            border-color: transparent;
        }
    }
}

@include b(button-group) {
    @include utils-clearfix;
    display: inline-block;
    vertical-align: middle;

    // add author: tangdm
    & + & {
        margin-left: .5rem;
    }

    & > .el-button {
        float: left;
        position: relative;
        & + .el-button {
            margin-left: 0;
        }
        &.is-disabled {
            z-index: 1;
        }
        &:first-child {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }
        &:last-child {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }
        &:first-child:last-child {
            border-top-right-radius: $--button-border-radius;
            border-bottom-right-radius: $--button-border-radius;
            border-top-left-radius: $--button-border-radius;
            border-bottom-left-radius: $--button-border-radius;

            &.is-round {
                border-radius: 20px;
            }

            &.is-circle {
                border-radius: 50%;
            }
        }
        &:not(:first-child):not(:last-child) {
            border-radius: 0;
        }
        &:not(:last-child) {
            margin-right: -1px;
        }

        // delete author: tangdm descript: remove the focus status [code] &:focus
        &:hover,
        &:active {
            z-index: 1;
        }

        @include when(active) {
            z-index: 1;
        }
    }

    & > .el-dropdown {
        & > .el-button {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
            border-left-color: rgba($--color-white, 0.5);
        }
    }

    @each $type in (primary, success, warning, danger, info) {
        .el-button--#{$type} {
            &:first-child {
                border-right-color: rgba($--color-white, 0.5);
            }
            &:last-child {
                border-left-color: rgba($--color-white, 0.5);
            }
            &:not(:first-child):not(:last-child) {
                border-left-color: rgba($--color-white, 0.5);
                border-right-color: rgba($--color-white, 0.5);
            }
        }
    }
}




@include b(dropdown) {
    display: inline-block;
    position: relative;
    // update author: tangdm [code] color: $--color-text-regular; font-size: $--font-size-base;
    color: $--color-text-primary;
    @include mq($large) {
        font-size: $dg--font-large;
    }
    @include mq($medium) {
        font-size: $dg--font-medium;
    }
    @include mq($small) {
        font-size: $dg--font-small;
    }

    .el-button-group {
        display: block;
        .el-button {
            float: none;
        }
    }

    & .el-dropdown__caret-button {
        padding-left: 5px;
        padding-right: 5px;
        position: relative;
        border-left: none;

        &::before {
            $gap: 5px;

            content: '';
            position: absolute;
            display: block;
            width: 1px;
            top: $gap;
            bottom: $gap;
            left: 0;
            background: mix(white, transparent, 50%);
        }

        &:hover {
            &::before {
                top: 0;
                bottom: 0;
            }
        }

        & .el-dropdown__icon {
            padding-left: 0;
        }
    }
    @include e(icon) {
        font-size: 12px;
        margin: 0 3px;
    }

    .el-dropdown-selfdefine {
        // 自定义
        &:focus:active,
        &:focus:not(.focusing) {
            outline-width: 0;
        }
    }
}

@include b(dropdown-menu) {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    padding: 10px 0;
    margin: 5px 0;
    background-color: $dg--dropdown-menu-background;
    border: 1px solid $--border-color-lighter;
    border-radius: $--border-radius-base;
    box-shadow: $--dropdown-menu-box-shadow;

    @include e(item) {
        list-style: none;
        line-height: 36px;
        padding: 0 20px;
        margin: 0;

        // update author: tangdm [code] color: $--color-text-regular; font-size: $--font-size-base;
        color: $--color-text-primary;
        @include mq($large) {
            font-size: $dg--font-large;
        }
        @include mq($medium) {
            font-size: $dg--font-medium;
        }
        @include mq($small) {
            font-size: $dg--font-small;
        }

        cursor: pointer;
        outline: none;
        &:not(.is-disabled):hover,
        &:focus {
            background-color: $--dropdown-menuItem-hover-fill;
            color: $--dropdown-menuItem-hover-color;
        }

        i {
            margin-right: 5px;
        }

        @include m(divided) {
            $divided-offset: 6px;

            position: relative;
            margin-top: $divided-offset;
            border-top: 1px solid $--border-color-lighter;

            &:before {
                content: '';
                height: $divided-offset;
                display: block;
                margin: 0 -20px;
                background-color: $--color-white;
            }
        }

        @include when(disabled) {
            cursor: default;
            color: $--font-color-disabled-base;
            pointer-events: none;
        }
    }

    @include m(medium) {
        padding: 6px 0;

        @include e(item) {
            line-height: 30px;
            padding: 0 17px;
            font-size: 14px;

            &.el-dropdown-menu__item--divided {
                $divided-offset: 6px;
                margin-top: $divided-offset;

                &:before {
                    height: $divided-offset;
                    margin: 0 -17px;
                }
            }
        }
    }

    @include m(small) {
        padding: 6px 0;

        @include e(item) {
            line-height: 27px;
            padding: 0 15px;
            font-size: 13px;

            &.el-dropdown-menu__item--divided {
                $divided-offset: 4px;
                margin-top: $divided-offset;

                &:before {
                    height: $divided-offset;
                    margin: 0 -15px;
                }
            }
        }
    }

    @include m(mini) {
        padding: 3px 0;

        @include e(item) {
            line-height: 24px;
            padding: 0 10px;
            font-size: 12px;

            &.el-dropdown-menu__item--divided {
                $divided-offset: 3px;
                margin-top: $divided-offset;

                &:before {
                    height: $divided-offset;
                    margin: 0 -10px;
                }
            }
        }
    }
}









@mixin menu-item {
    height: 56px;
    line-height: 56px;
    font-size: $--menu-item-font-size;
    color: $--menu-item-font-color;
    padding: 0 20px;
    list-style: none;
    cursor: pointer;
    position: relative;
    transition: border-color 0.3s, background-color 0.3s, color 0.3s;
    box-sizing: border-box;
    white-space: nowrap;

    * {
        vertical-align: middle;
    }

    i {
        color: $--color-text-secondary;
    }

    &:hover,
    &:focus {
        outline: none;
        background-color: $--menu-item-hover-fill;
    }

    @include when(disabled) {
        opacity: 0.25;
        cursor: not-allowed;
        background: none !important;
    }
}

@include b(menu) {
    border-right: solid 1px #e6e6e6;
    list-style: none;
    position: relative;
    margin: 0;
    padding-left: 0;
    background-color: $--menu-background-color;
    @include utils-clearfix;
    &.el-menu--horizontal {
        border-bottom: solid 1px #e6e6e6;
    }

    @include m(horizontal) {
        border-right: none;
        & > .el-menu-item {
            float: left;
            height: 60px;
            line-height: 60px;
            margin: 0;
            border-bottom: 2px solid transparent;
            color: $--color-text-secondary;

            a,
            a:hover {
                color: inherit;
            }

            &:not(.is-disabled):hover,
            &:not(.is-disabled):focus {
                background-color: #fff;
            }
        }
        & > .el-submenu {
            float: left;

            &:focus,
            &:hover {
                outline: none;
                .el-submenu__title {
                    color: $--color-text-primary;
                }
            }

            &.is-active {
                .el-submenu__title {
                    border-bottom: 2px solid $--color-primary;
                    color: $--color-text-primary;
                }
            }

            & .el-submenu__title {
                height: 60px;
                line-height: 60px;
                border-bottom: 2px solid transparent;
                color: $--color-text-secondary;

                &:hover {
                    background-color: #fff;
                }
            }
            & .el-submenu__icon-arrow {
                position: static;
                vertical-align: middle;
                margin-left: 8px;
                margin-top: -3px;
            }
        }
        & .el-menu {
            & .el-menu-item,
            & .el-submenu__title {
                background-color: $--color-white;
                float: none;
                height: 36px;
                line-height: 36px;
                padding: 0 10px;
                color: $--color-text-secondary;
            }
            & .el-menu-item.is-active,
            & .el-submenu.is-active > .el-submenu__title {
                color: $--color-text-primary;
            }
        }
        & .el-menu-item:not(.is-disabled):hover,
        & .el-menu-item:not(.is-disabled):focus {
            outline: none;
            color: $--color-text-primary;
        }
        & > .el-menu-item.is-active {
            border-bottom: 2px solid $--color-primary;
            color: $--color-text-primary;
        }
    }
    @include m(collapse) {
        width: 64px;

        > .el-menu-item,
        > .el-submenu > .el-submenu__title {
            [class^='el-icon-'] {
                margin: 0;
                vertical-align: middle;
                width: 24px;
                text-align: center;
            }
            .el-submenu__icon-arrow {
                display: none;
            }
            span {
                height: 0;
                width: 0;
                overflow: hidden;
                visibility: hidden;
                display: inline-block;
            }
        }

        > .el-menu-item.is-active i {
            color: inherit;
        }

        .el-menu .el-submenu {
            min-width: 200px;
        }

        .el-submenu {
            position: relative;
            & .el-menu {
                position: absolute;
                margin-left: 5px;
                top: 0;
                left: 100%;
                z-index: 10;
                border: 1px solid $--border-color-light;
                border-radius: $--border-radius-small;
                box-shadow: $--box-shadow-light;
            }

            &.is-opened {
                > .el-submenu__title .el-submenu__icon-arrow {
                    transform: none;
                }
            }
        }
    }
    @include m(popup) {
        z-index: 100;
        min-width: 200px;
        border: none;
        padding: 5px 0;
        border-radius: $--border-radius-small;
        box-shadow: $--box-shadow-light;

        &-bottom-start {
            margin-top: 5px;
        }
        &-right-start {
            margin-left: 5px;
            margin-right: 5px;
        }
    }
}
@include b(menu-item) {
    @include menu-item;

    & [class^='el-icon-'] {
        margin-right: 5px;
        width: 24px;
        text-align: center;
        font-size: 18px;
        vertical-align: middle;
    }
    @include when(active) {
        color: $--color-primary;
        i {
            color: inherit;
        }
    }
}

@include b(submenu) {
    list-style: none;
    margin: 0;
    padding-left: 0;

    @include e(title) {
        @include menu-item;

        &:hover {
            background-color: $--menu-item-hover-fill;
        }
    }
    & .el-menu {
        border: none;
    }
    & .el-menu-item {
        height: 50px;
        line-height: 50px;
        padding: 0 45px;
        min-width: 200px;
    }
    @include e(icon-arrow) {
        position: absolute;
        top: 50%;
        margin-top: -7px;
        transition: transform 0.3s;
        font-size: 12px;
        @include mq($large) {
            right: $dg--rem-large;
        }
        @include mq($medium) {
            right: $dg--rem-medium;
        }
        @include mq($small) {
            right: $dg--rem-small;
        }
    }
    @include when(active) {
        .el-submenu__title {
            border-bottom-color: $--color-primary;
        }
    }
    @include when(opened) {
        > .el-submenu__title .el-submenu__icon-arrow {
            transform: rotateZ(180deg);
        }
    }
    @include when(disabled) {
        .el-submenu__title,
        .el-menu-item {
            opacity: 0.25;
            cursor: not-allowed;
            background: none !important;
        }
    }
    [class^='el-icon-'] {
        vertical-align: middle;
        margin-right: 5px;
        width: 24px;
        text-align: center;
        font-size: 18px;
    }
}

@include b(menu-item-group) {
    > ul {
        padding: 0;
    }
    @include e(title) {
        padding: 7px 0 7px 20px;
        line-height: normal;
        font-size: 12px;
        color: $--color-text-secondary;
    }
}

.horizontal-collapse-transition .el-submenu__title .el-submenu__icon-arrow {
    transition: 0.2s;
    opacity: 0;
}









@include b(input-number) {
    position: relative;
    display: inline-block;
    min-width: 100px;

    // update author: tangdm [code] line-height: #{$--input-height - 2};
    @include mq($large) {
        line-height: 30px;
    }
    @include mq($medium) {
        line-height: 26px;
    }
    @include mq($small) {
        line-height: 21px;
    }

    .el-input {
        display: block;

        &__inner {
            -webkit-appearance: none;
            padding-left: #{$--input-height + 10};
            padding-right: #{$--input-height + 10};
            text-align: center;
        }
    }

    @include e((increase, decrease)) {
        position: absolute;
        z-index: 1;
        top: 1px;
        width: $--input-height;
        height: auto;
        text-align: center;

        // update author:lutz [code] background: $--background-color-base;
        background: $--color-white;

        color: $--color-text-regular;
        cursor: pointer;
        font-size: 13px;

        &:hover {
            color: $--color-primary;

            &:not(.is-disabled) ~ .el-input .el-input__inner:not(.is-disabled) {
                border-color: $--input-focus-border;
            }
        }

        &.is-disabled {
            color: $--disabled-color-base;
            cursor: not-allowed;
        }
    }

    @include e(increase) {
        right: 1px;
        border-radius: 0 $--border-radius-base $--border-radius-base 0;
        border-left: $--border-base;
    }

    @include e(decrease) {
        left: 1px;
        border-radius: $--border-radius-base 0 0 $--border-radius-base;
        border-right: $--border-base;
    }

    @include when(disabled) {
        @include e((increase, decrease)) {
            border-color: $--disabled-border-base;
            color: $--disabled-border-base;

            &:hover {
                color: $--disabled-border-base;
                cursor: not-allowed;
            }
        }
    }

    @include m(medium) {
        width: 200px;
        line-height: #{$--input-medium-height - 2};

        @include e((increase, decrease)) {
            width: $--input-medium-height;
            font-size: $--input-medium-font-size;
        }

        .el-input__inner {
            padding-left: #{$--input-medium-height + 7};
            padding-right: #{$--input-medium-height + 7};
        }
    }

    @include m(small) {
        width: 130px;
        line-height: #{$--input-small-height - 2};

        @include e((increase, decrease)) {
            width: $--input-small-height;
            font-size: $--input-small-font-size;

            [class*='el-icon'] {
                transform: scale(0.9);
            }
        }

        .el-input__inner {
            padding-left: #{$--input-small-height + 7};
            padding-right: #{$--input-small-height + 7};
        }
    }

    @include m(mini) {
        width: 130px;
        line-height: #{$--input-mini-height - 2};

        @include e((increase, decrease)) {
            width: $--input-mini-height;
            font-size: $--input-mini-font-size;

            [class*='el-icon'] {
                transform: scale(0.8);
            }
        }

        .el-input__inner {
            padding-left: #{$--input-mini-height + 7};
            padding-right: #{$--input-mini-height + 7};
        }
    }

    @include when(without-controls) {
        .el-input__inner {
            padding-left: 15px;
            padding-right: 15px;
        }
    }

    @include when(controls-right) {
        .el-input__inner {
            padding-left: 15px;
            padding-right: #{$--input-height + 10};
        }

        @include e((increase, decrease)) {
            height: auto;
            line-height: #{($--input-height - 2) / 2};

            [class*='el-icon'] {
                transform: scale(0.8);
            }
        }

        @include e(increase) {
            border-radius: 0 $--border-radius-base 0 0;
            border-bottom: $--border-base;
        }

        @include e(decrease) {
            right: 1px;
            bottom: 1px;
            top: auto;
            left: auto;
            border-right: none;
            border-left: $--border-base;
            border-radius: 0 0 $--border-radius-base 0;
        }

        &[class*='medium'] {
            [class*='increase'],
            [class*='decrease'] {
                line-height: #{($--input-medium-height - 2) / 2};
            }
        }

        &[class*='small'] {
            [class*='increase'],
            [class*='decrease'] {
                line-height: #{($--input-small-height - 2) / 2};
            }
        }

        &[class*='mini'] {
            [class*='increase'],
            [class*='decrease'] {
                line-height: #{($--input-mini-height - 2) / 2};
            }
        }
    }
}





// create author:lutz


@include b(radio) {
    color: $--radio-font-color;
    font-weight: $--radio-font-weight;
    line-height: 1;
    position: relative;
    cursor: pointer;
    display: inline-block;
    white-space: nowrap;
    outline: none;
    font-size: $--font-size-base;
    margin-right: 24px;
    @include utils-user-select(none);

    @include when(bordered) {
        padding: $--radio-bordered-padding;
        border-radius: $--border-radius-base;
        border: $--border-base;
        box-sizing: border-box;
        height: $--radio-bordered-height;

        &.is-checked {
            border-color: $--color-primary;
        }

        &.is-disabled {
            cursor: not-allowed;
            border-color: $--border-color-lighter;
        }

        & + .el-radio.is-bordered {
            margin-left: 10px;
        }
    }

    @include m(medium) {
        &.is-bordered {
            padding: $--radio-bordered-medium-padding;
            border-radius: $--button-medium-border-radius;
            height: $--radio-bordered-medium-height;
            .el-radio__label {
                font-size: $--button-medium-font-size;
            }
            .el-radio__inner {
                height: $--radio-bordered-medium-input-height;
                width: $--radio-bordered-medium-input-width;
            }
        }
    }
    @include m(small) {
        &.is-bordered {
            padding: $--radio-bordered-small-padding;
            border-radius: $--button-small-border-radius;
            height: $--radio-bordered-small-height;
            .el-radio__label {
                font-size: $--button-small-font-size;
            }
            .el-radio__inner {
                height: $--radio-bordered-small-input-height;
                width: $--radio-bordered-small-input-width;
            }
        }
    }
    @include m(mini) {
        &.is-bordered {
            padding: $--radio-bordered-mini-padding;
            border-radius: $--button-mini-border-radius;
            height: $--radio-bordered-mini-height;
            .el-radio__label {
                font-size: $--button-mini-font-size;
            }
            .el-radio__inner {
                height: $--radio-bordered-mini-input-height;
                width: $--radio-bordered-mini-input-width;
            }
        }
    }

    &:last-child {
        margin-right: 0;
    }

    @include e(input) {
        white-space: nowrap;
        cursor: pointer;
        outline: none;
        display: inline-block;
        line-height: 1;
        position: relative;
        vertical-align: middle;

        @include when(disabled) {
            .el-radio__inner {
                background-color: $--radio-disabled-input-fill;
                border-color: $--radio-disabled-input-border-color;
                cursor: not-allowed;

                &::after {
                    cursor: not-allowed;
                    background-color: $--radio-disabled-icon-color;
                }

                & + .el-radio__label {
                    cursor: not-allowed;
                }
            }
            &.is-checked {
                .el-radio__inner {
                    background-color: $--radio-disabled-checked-input-fill;
                    border-color: $--radio-disabled-checked-input-border-color;

                    &::after {
                        background-color: $--radio-disabled-checked-icon-color;
                    }
                }
            }
            & + span.el-radio__label {
                color: $--color-text-placeholder;
                cursor: not-allowed;
            }
        }

        @include when(checked) {
            .el-radio__inner {
                border-color: $--radio-checked-input-border-color;
                background: $--radio-checked-icon-color;

                &::after {
                    // create-start author:lutz describe:选中中心点大小
                    width: 10px;
                    height: 10px;
                    @include mq($small) {
                        width: 8px;
                        height: 8px;
                    }
                    background: $--color-primary;
                    // create-end

                    transform: translate(-50%, -50%) scale(1);
                }
            }

            & + .el-radio__label {
                color: $--radio-checked-font-color;
            }
        }

        @include when(focus) {
            .el-radio__inner {
                border-color: $--radio-input-border-color-hover;
            }
        }
    }
    @include e(inner) {
        border: $--radio-input-border;
        border-radius: $--radio-input-border-radius;
        background-color: $--radio-input-background-color;
        position: relative;
        cursor: pointer;
        display: inline-block;
        box-sizing: border-box;

		// update author: tangdm [code]
		// width: $--radio-input-width;
		// height: $--radio-input-height;
		@include mq($large) {
			width: $dg--radio-input-large-width;
			height: $dg--radio-input-large-width;
		}
		@include mq($medium) {
			width: $dg--radio-input-medium-width;
			height: $dg--radio-input-medium-width;
		}
		@include mq($small) {
			width: $dg--radio-input-small-width;
			height: $dg--radio-input-small-width;
		}

        &:hover {
            border-color: $--radio-input-border-color-hover;
        }

        &::after {
            width: 4px;
            height: 4px;
            border-radius: $--radio-input-border-radius;
            background-color: $--color-white;
            content: '';
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%) scale(0);
            transition: transform 0.15s ease-in;
        }
    }

    @include e(original) {
        opacity: 0;
        outline: none;
        position: absolute;
        z-index: -1;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: 0;
    }

    &:focus:not(.is-focus):not(:active):not(.is-disabled) {
        /*获得焦点时 样式提醒*/
        .el-radio__inner {
            box-shadow: 0 0 2px 2px $--radio-input-border-color-hover;
        }
    }

    @include e(label) {
		// update author: tangdm [code] font-size: $--radio-font-size;
		@include mq($large) {
			font-size: $dg--font-large;
		}
		@include mq($medium) {
			font-size: $dg--font-medium;
		}
		@include mq($small) {
			font-size: $dg--font-small;
		}

        // upadte author:lutz [code] padding-left: 10px;
        padding-left: $dg--radio-label-padding-left;
    }
}




@include b(radio-group) {
    display: inline-block;
    line-height: 1;
    vertical-align: middle;
    font-size: 0;
}




// create author:tangdm


@include b(radio-button) {
    position: relative;
    display: inline-block;
    outline: none;

    @include e(inner) {
        display: inline-block;
        line-height: 1;
        white-space: nowrap;
        vertical-align: middle;
        background: $--button-default-background-color;
        border: $--border-base;
        font-weight: $--button-font-weight;
        border-left: 0;
        color: $--button-default-font-color;
        -webkit-appearance: none;
        text-align: center;
        box-sizing: border-box;
        outline: none;
        margin: 0;
        position: relative;
        cursor: pointer;
        transition: $--all-transition;

		// update author: tangdm [code] @include button-size($--button-padding-vertical, $--button-padding-horizontal, $--button-font-size, 0);
		@include mq($large) {
			height: $dg--button-media-large-height;
			line-height: 1;
			@include button-size(
				$dg--button-large-padding-vertical,
                $dg--rem-large,
				$dg--font-large,
				0
			);
		}
		@include mq($medium) {
			height: $dg--button-media-medium-height;
			line-height: 1;
			@include button-size(
				$dg--button-medium-padding-vertical,
                $dg--rem-medium,
				$dg--font-medium,
				0
			);
		}
		@include mq($small) {
			height: $dg--button-media-small-height;
			line-height: $dg--button-media-small-height - 2;
			@include button-size(
				$dg--button-small-padding-vertical,
                $dg--rem-small,
				$dg--font-small,
				0
			);
		}

        &:hover {
            color: $--color-primary;
        }

        & [class*='el-icon-'] {
            line-height: 0.9;

            & + span {
                margin-left: 5px;
            }
        }
    }

    &:first-child {
        .el-radio-button__inner {
            border-left: $--border-base;
            border-radius: $--border-radius-base 0 0 $--border-radius-base;
            box-shadow: none !important;
        }
    }

    @include e(orig-radio) {
        opacity: 0;
        outline: none;
        position: absolute;
        z-index: -1;

        &:checked {
            & + .el-radio-button__inner {
                color: $--radio-button-checked-font-color;
                background-color: $--radio-button-checked-background-color;
                border-color: $--radio-button-checked-border-color;
                box-shadow: -1px 0 0 0 $--radio-button-checked-border-color;
            }
        }

        &:disabled {
            & + .el-radio-button__inner {
                color: $--button-disabled-font-color;
                cursor: not-allowed;
                background-image: none;
                background-color: $--button-disabled-background-color;
                border-color: $--button-disabled-border-color;
                box-shadow: none;
            }
            &:checked + .el-radio-button__inner {
                // create author:lutz describe:禁用选中白字
                color: $--button-disabled-font-color;

                background-color: $--radio-button-disabled-checked-fill;
            }
        }
    }

    &:last-child {
        .el-radio-button__inner {
            border-radius: 0 $--border-radius-base $--border-radius-base 0;
        }
    }

    &:first-child:last-child {
        .el-radio-button__inner {
            border-radius: $--border-radius-base;
        }
    }

    @include m(medium) {
        & .el-radio-button__inner {
			// update author: tangdm [code]
            //line-height: 1;
            //@include button-size(
            //    $--button-medium-padding-vertical,
            //    $--button-medium-padding-horizontal,
            //    $--button-medium-font-size,
            //    0
            //);
            line-height: 1;
            @include mq($large) {
                height: $dg--button-medium-height;
                @include button-size(
                    $--button-medium-padding-vertical,
                    $--button-medium-padding-horizontal,
                    $--button-medium-font-size,
                    0
                );
            }
            @include mq($medium) {
                height: $dg--button-medium-height - 4;
                @include button-size(
                    $--button-medium-padding-vertical - 2,
                    $--button-medium-padding-horizontal,
                    $--button-medium-font-size,
                    0
                );
            }
            @include mq($small) {
                height: $dg--button-medium-height - 8;
                @include button-size(
                    $--button-medium-padding-vertical - 4,
                    $--button-medium-padding-horizontal,
                    $--button-medium-font-size,
                    0
                );
            }
        }
    }
    @include m(small) {
        & .el-radio-button__inner {
			// update author: tangdm [code]
			//line-height: 1;
            //@include button-size(
             //   $--button-small-padding-vertical,
             //   $--button-small-padding-horizontal,
             //   $--button-small-font-size,
             //   0
            //);
            line-height: 1;
            @include mq($large) {
                height: $dg--button-small-height;
                @include button-size(
                    $--button-small-padding-vertical,
                    $--button-small-padding-horizontal,
                    $--button-small-font-size,
                    0
                );
            }
            @include mq($medium) {
                height: $dg--button-small-height - 4;
                @include button-size(
                    $--button-small-padding-vertical - 2,
                    $--button-small-padding-horizontal,
                    $--button-small-font-size,
                    0
                );
            }
            @include mq($small) {
                height: $dg--button-small-height - 8;
                @include button-size(
                    $--button-small-padding-vertical - 4,
                    $--button-small-padding-horizontal,
                    $--button-small-font-size,
                    0
                );
            }
        }
    }
    @include m(mini) {
        & .el-radio-button__inner {
			// update author: tangdm [code]
			//line-height: 1.4;
            //@include button-size(
             //   $--button-mini-padding-vertical,
             //   $--button-mini-padding-horizontal,
             //   $--button-mini-font-size,
             //   0
            //);
            line-height: 1.4;
            @include mq($large) {
                height: $dg--button-mini-height;
                @include button-size(
                    $--button-mini-padding-vertical,
                    $--button-mini-padding-horizontal,
                    $--button-mini-font-size,
                    0
                );
            }
            @include mq($medium) {
                height: $dg--button-mini-height - 4;
                @include button-size(
                    $--button-mini-padding-vertical - 2,
                    $--button-mini-padding-horizontal,
                    $--button-mini-font-size,
                    0
                );
            }
            @include mq($small) {
                height: $dg--button-mini-height - 8;
                @include button-size(
                    $--button-mini-padding-vertical - 4,
                    $--button-mini-padding-horizontal,
                    $--button-mini-font-size,
                    0
                );
            }
        }
    }

    // delete author: tangdm
    //&:focus:not(.is-focus):not(:active):not(.is-disabled) {
    //    /*获得焦点时 样式提醒*/
    //    box-shadow: 0 0 2px 2px $--radio-button-checked-border-color;
    //}

	// add author: tangdm
	&.is-lace {
		.el-radio-button__orig-radio:checked + .el-radio-button__inner {
			background-color: transparent;
			color: $--color-primary;
		}
	}
}





// create author:lutz


@include b(checkbox) {
    color: $--checkbox-font-color;
    font-weight: $--checkbox-font-weight;
    font-size: $--font-size-base;
    position: relative;
    cursor: pointer;
    display: inline-block;
    white-space: nowrap;
    user-select: none;
    margin-right: 24px;

    @include when(bordered) {
        padding: $--checkbox-bordered-padding;
        border-radius: $--border-radius-base;
        border: $--border-base;
        box-sizing: border-box;
        line-height: normal;
        height: $--checkbox-bordered-height;

        &.is-checked {
            border-color: $--color-primary;
        }

        &.is-disabled {
            border-color: $--border-color-lighter;
            cursor: not-allowed;
        }

        & + .el-checkbox.is-bordered {
            margin-left: 10px;
        }

        &.el-checkbox--medium {
            padding: $--checkbox-bordered-medium-padding;
            border-radius: $--button-medium-border-radius;
            height: $--checkbox-bordered-medium-height;

            .el-checkbox__label {
                line-height: 17px;
                font-size: $--button-medium-font-size;
            }

            .el-checkbox__inner {
                height: $--checkbox-bordered-medium-input-height;
                width: $--checkbox-bordered-medium-input-width;
            }
        }

        &.el-checkbox--small {
            padding: $--checkbox-bordered-small-padding;
            border-radius: $--button-small-border-radius;
            height: $--checkbox-bordered-small-height;

            .el-checkbox__label {
                line-height: 15px;
                font-size: $--button-small-font-size;
            }

            .el-checkbox__inner {
                height: $--checkbox-bordered-small-input-height;
                width: $--checkbox-bordered-small-input-width;

                &::after {
                    height: 6px;
                    width: 2px;
                }
            }
        }

        &.el-checkbox--mini {
            padding: $--checkbox-bordered-mini-padding;
            border-radius: $--button-mini-border-radius;
            height: $--checkbox-bordered-mini-height;

            .el-checkbox__label {
                line-height: 12px;
                font-size: $--button-mini-font-size;
            }

            .el-checkbox__inner {
                height: $--checkbox-bordered-mini-input-height;
                width: $--checkbox-bordered-mini-input-width;
                &::after {
                    height: 6px;
                    width: 2px;
                }
            }
        }
    }

    @include e(input) {
        white-space: nowrap;
        cursor: pointer;
        outline: none;
        display: inline-block;
        line-height: 1;
        position: relative;
        vertical-align: middle;

        @include when(disabled) {
            .el-checkbox__inner {
                background-color: $--checkbox-disabled-input-fill;
                border-color: $--checkbox-disabled-border-color;
                cursor: not-allowed;

                &::after {
                    cursor: not-allowed;
                    border-color: $--checkbox-disabled-icon-color;
                }

                & + .el-checkbox__label {
                    cursor: not-allowed;
                }
            }

            &.is-checked {
                .el-checkbox__inner {
                    background-color: $--checkbox-disabled-checked-input-fill;
                    border-color: $--checkbox-disabled-checked-input-border-color;

                    &::after {
                        border-color: $--checkbox-disabled-checked-icon-color;
                    }
                }
            }

            &.is-indeterminate {
                .el-checkbox__inner {
                    background-color: $--checkbox-disabled-checked-input-fill;
                    border-color: $--checkbox-disabled-checked-input-border-color;

                    &::before {
                        background-color: $--checkbox-disabled-checked-icon-color;
                        border-color: $--checkbox-disabled-checked-icon-color;
                    }
                }
            }

            & + span.el-checkbox__label {
                color: $--disabled-color-base;
                cursor: not-allowed;
            }
        }
        // update author: tangdm descript: remove position
        @include when(focus) {
            /*focus时 视觉上区分*/
            // update author: tangdm [code] border-color: $--checkbox-input-border-color-hover;
            .el-checkbox__inner {
                border-color: $--border-color-base;
            }
        }
        @include when(checked) {
            .el-checkbox__inner {
                background-color: $--checkbox-checked-background-color;
                border-color: $--checkbox-checked-input-border-color;

                &::after {
                    transform: rotate(45deg) scaleY(1);
                }
            }

            & + .el-checkbox__label {
                color: $--checkbox-checked-font-color;
            }
        }
        @include when(indeterminate) {
            .el-checkbox__inner {
                // update author: tangdm [code] background-color: $--checkbox-checked-background-color;
                background-color: transparent;
                border-color: $--checkbox-checked-input-border-color;

                &::before {
                    content: '';
                    position: absolute;
                    display: block;
                    right: 0;

                    // update author:lutz [code] background-color: $--checkbox-checked-icon-color; top: 5px; left: 0;
                    background-color: $--color-primary;
                    top: 2px;
                    left: 2px;

                    // update author:lutz [code] height: 2px;
                    @include mq($large) {
                        width: 10px;
                        height: 10px;
                    }
                    @include mq($medium) {
                        width: 10px;
                        height: 10px;
                    }
                    @include mq($small) {
                        width: 8px;
                        height: 8px;
                    }

                    // delete author: tangdm [code] transform: scale(0.5);
                }

                &::after {
                    display: none;
                }
            }
        }
    }

    @include e(inner) {
        display: inline-block;
        position: relative;
        border: $--checkbox-input-border;
        border-radius: $--checkbox-border-radius;
        box-sizing: border-box;
        background-color: $--checkbox-background-color;
        z-index: $--index-normal;
        transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46),
            background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46);

        // update author: tangdm [code]
        // width: $--checkbox-input-width;
        // height: $--checkbox-input-height;
        @include mq($large) {
            width: $dg--checkbox-input-large-width;
            height: $dg--checkbox-input-large-width;
        }
        @include mq($medium) {
            width: $dg--checkbox-input-medium-width;
            height: $dg--checkbox-input-medium-width;
        }
        @include mq($small) {
            width: $dg--checkbox-input-small-width;
            height: $dg--checkbox-input-small-width;
        }

        &:hover {
            border-color: $--checkbox-input-border-color-hover;
        }

        &::after {
            box-sizing: content-box;
            content: '';
            border: 1px solid $--checkbox-checked-icon-color;
            border-left: 0;
            border-top: 0;
            height: 7px;
            position: absolute;
            transform: rotate(45deg) scaleY(0);
            width: 3px;
            transition: transform 0.15s ease-in 0.05s;
            transform-origin: center;

            // update author: tangdm [code] left: 4px; top: 1px;
            @include mq($large) {
                left: 5px;
                top: 2px;
            }
            @include mq($medium) {
                left: 5px;
                top: 2px;
            }
            @include mq($small) {
                left: 4px;
                top: 1px;
            }
        }
    }

    @include e(original) {
        opacity: 0;
        outline: none;
        position: absolute;
        margin: 0;
        width: 0;
        height: 0;
        z-index: -1;
    }

    @include e(label) {
        display: inline-block;

        // update author:lutz [code] padding-left: 10px;
        padding-left: $dg--checkbox-label-padding-left;

        // update author: tangdm [code] line-height: 19px; font-size: $--checkbox-font-size;
        line-height: 1.4;
        @include mq($large) {
            font-size: $dg--font-large;
        }
        @include mq($medium) {
            font-size: $dg--font-medium;
        }
        @include mq($small) {
            font-size: $dg--font-small;
        }
    }

    &:last-child {
        margin-right: 0;
    }
}

@include b(checkbox-button) {
    position: relative;
    display: inline-block;

    @include e(inner) {
        display: inline-block;
        line-height: 1;
        font-weight: $--checkbox-font-weight;
        white-space: nowrap;
        vertical-align: middle;
        cursor: pointer;
        background: $--button-default-background-color;
        border: $--border-base;
        border-left: 0;
        color: $--button-default-font-color;
        -webkit-appearance: none;
        text-align: center;
        box-sizing: border-box;
        outline: none;
        margin: 0;
        position: relative;
        transition: $--all-transition;
        @include utils-user-select(none);

        // update author: tangdm [code] @include button-size($--button-padding-vertical, $--button-padding-horizontal, $--button-font-size, 0);
        @include mq($large) {
            height: $dg--button-media-large-height;
            line-height: 1;
            @include button-size($dg--button-large-padding-vertical, $dg--rem-large, $dg--font-large, 0);
        }
        @include mq($medium) {
            height: $dg--button-media-medium-height;
            line-height: 1;
            @include button-size(
                $dg--button-medium-padding-vertical,
                $dg--rem-medium,
                $dg--font-medium,
                0
            );
        }
        @include mq($small) {
            height: $dg--button-media-small-height;
            line-height: $dg--button-media-small-height - 2;
            @include button-size($dg--button-small-padding-vertical, $dg--rem-small, $dg--font-small, 0);
        }

        &:hover {
            color: $--color-primary;
        }

        & [class*='el-icon-'] {
            line-height: 0.9;

            & + span {
                margin-left: 5px;
            }
        }
    }

    @include e(original) {
        opacity: 0;
        outline: none;
        position: absolute;
        margin: 0;
        z-index: -1;
    }

    // update author: tangdm descript: remove position [code] border-color: $--checkbox-button-checked-border-color;
    &.is-focus {
        & .el-checkbox-button__inner {
            border-color: $--border-color-base;
        }
    }
    &.is-checked {
        & .el-checkbox-button__inner {
            color: $--checkbox-button-checked-font-color;
            background-color: $--checkbox-button-checked-background-color;
            border-color: $--checkbox-button-checked-border-color;
            box-shadow: -1px 0 0 0 $--color-primary-light-4;
        }
        &:first-child .el-checkbox-button__inner {
            border-left-color: $--checkbox-button-checked-border-color;
        }
    }

    // create author:lutz describe:按钮状态下选中且禁用的样式
    &.is-checked.is-disabled {
        .el-checkbox-button__inner {
            color: $dg--checkbox-button-disabled-checked-color;
            background-color: $dg--checkbox-button-disabled-checked-background-color;
        }
    }

    &.is-disabled {
        & .el-checkbox-button__inner {
            color: $--button-disabled-font-color;
            cursor: not-allowed;
            background-image: none;
            background-color: $--button-disabled-background-color;
            border-color: $--button-disabled-border-color;
            box-shadow: none;
        }
        &:first-child .el-checkbox-button__inner {
            border-left-color: $--button-disabled-border-color;
        }
    }

    &:first-child {
        .el-checkbox-button__inner {
            border-left: $--border-base;
            border-radius: $--border-radius-base 0 0 $--border-radius-base;
            box-shadow: none !important;
        }
    }

    &:last-child {
        .el-checkbox-button__inner {
            border-radius: 0 $--border-radius-base $--border-radius-base 0;
        }
    }
    @include m(medium) {
        .el-checkbox-button__inner {
            // update author: tangdm [code]
            //line-height: 1;
            //@include button-size(
            //    $--button-medium-padding-vertical,
            //    $--button-medium-padding-horizontal,
            //    $--button-medium-font-size,
            //    0
            //);
            line-height: 1;
            @include mq($large) {
                height: $dg--button-medium-height;
                @include button-size(
                    $--button-medium-padding-vertical,
                    $--button-medium-padding-horizontal,
                    $--button-medium-font-size,
                    0
                );
            }
            @include mq($medium) {
                height: $dg--button-medium-height - 4;
                @include button-size(
                    $--button-medium-padding-vertical - 2,
                    $--button-medium-padding-horizontal,
                    $--button-medium-font-size,
                    0
                );
            }
            @include mq($small) {
                height: $dg--button-medium-height - 8;
                @include button-size(
                    $--button-medium-padding-vertical - 4,
                    $--button-medium-padding-horizontal,
                    $--button-medium-font-size,
                    0
                );
            }
        }
    }
    @include m(small) {
        .el-checkbox-button__inner {
            // update author: tangdm [code]
            //line-height: 1;
            //@include button-size(
            //   $--button-small-padding-vertical,
            //   $--button-small-padding-horizontal,
            //   $--button-small-font-size,
            //   0
            //);
            line-height: 1;
            @include mq($large) {
                height: $dg--button-small-height;
                @include button-size(
                    $--button-small-padding-vertical,
                    $--button-small-padding-horizontal,
                    $--button-small-font-size,
                    0
                );
            }
            @include mq($medium) {
                height: $dg--button-small-height - 4;
                @include button-size(
                    $--button-small-padding-vertical - 2,
                    $--button-small-padding-horizontal,
                    $--button-small-font-size,
                    0
                );
            }
            @include mq($small) {
                height: $dg--button-small-height - 8;
                @include button-size(
                    $--button-small-padding-vertical - 4,
                    $--button-small-padding-horizontal,
                    $--button-small-font-size,
                    0
                );
            }
        }
    }
    @include m(mini) {
        .el-checkbox-button__inner {
            // update author: tangdm [code]
            //line-height: 1.4;
            //@include button-size(
            //   $--button-mini-padding-vertical,
            //   $--button-mini-padding-horizontal,
            //   $--button-mini-font-size,
            //   0
            //);
            line-height: 1.4;
            @include mq($large) {
                height: $dg--button-mini-height;
                @include button-size(
                    $--button-mini-padding-vertical,
                    $--button-mini-padding-horizontal,
                    $--button-mini-font-size,
                    0
                );
            }
            @include mq($medium) {
                height: $dg--button-mini-height - 4;
                @include button-size(
                    $--button-mini-padding-vertical - 2,
                    $--button-mini-padding-horizontal,
                    $--button-mini-font-size,
                    0
                );
            }
            @include mq($small) {
                height: $dg--button-mini-height - 8;
                @include button-size(
                    $--button-mini-padding-vertical - 4,
                    $--button-mini-padding-horizontal,
                    $--button-mini-font-size,
                    0
                );
            }
        }
    }

    // add author: tangdm
    &.is-lace {
        &.is-checked .el-checkbox-button__inner {
            background-color: transparent;
            color: $--color-primary;
        }
    }
}

@include b(checkbox-group) {
    font-size: 0;
}






@include b(switch) {
    display: inline-flex;
    align-items: center;
    position: relative;
    font-size: $--switch-font-size;
    line-height: $--switch-height;
    height: $--switch-height;
    vertical-align: middle;
    @include when(disabled) {
        & .el-switch__core,
        & .el-switch__label {
            cursor: not-allowed;
        }
    }

    @include e(label) {
        transition: 0.2s;
        height: $--switch-height;
        display: inline-block;
        font-size: $--switch-font-size;
        font-weight: 500;
        cursor: pointer;
        vertical-align: middle;
        color: $--color-text-primary;

        @include when(active) {
            color: $--color-primary;
        }

        @include m(left) {
            margin-right: 10px;
        }
        @include m(right) {
            margin-left: 10px;
        }
        & * {
            line-height: 1;
            display: inline-block;

			// update author: tangdm [code] font-size: $--switch-font-size;
			@include mq($large) {
				font-size: $dg--font-large;
			}
			@include mq($medium) {
				font-size: $dg--font-medium;
			}
			@include mq($small) {
				font-size: $dg--font-small;
			}
        }
    }

    @include e(input) {
        position: absolute;
        width: 0;
        height: 0;
        opacity: 0;
        margin: 0;
    }

    @include e(core) {
        margin: 0;
        display: inline-block;
        position: relative;
        width: $--switch-width;
        height: $--switch-height;
        // author: zwf border: 1px solid $--switch-off-color;
        border: 1px solid transparent;
        outline: none;
        border-radius: $--switch-core-border-radius;
        box-sizing: border-box;
        background: $--switch-off-color;
        cursor: pointer;
        transition: border-color 0.3s, background-color 0.3s;
        vertical-align: middle;
		// add author: tangdm
		line-height: 18px;

        &:after {
            content: '';
            position: absolute;
            top: 1px;
            left: 1px;
            border-radius: $--border-radius-circle;
            transition: all 0.3s;
            width: $--switch-button-size;
            height: $--switch-button-size;
            background-color: $--color-white;
        }
    }

    @include when(checked) {
        .el-switch__core {
            border-color: $--switch-on-color;
            background-color: $--switch-on-color;
            &::after {
                left: 100%;
                margin-left: -$--switch-button-size - 1px;
            }
        }
    }

    @include when(disabled) {
        opacity: 0.4;
    }

    @include m(wide) {
        .el-switch__label {
            &.el-switch__label--left {
                span {
                    left: 10px;
                }
            }
            &.el-switch__label--right {
                span {
                    right: 10px;
                }
            }
        }
    }

    & .label-fade-enter,
    & .label-fade-leave-active {
        opacity: 0;
    }
}










@include b(tooltip) {
  &:focus:not(.focusing), &:focus:hover {
    outline-width: 0;
  }
  @include e(popper) {
    position: absolute;
    border-radius: 4px;
    padding: $--tooltip-padding;
    z-index: $--index-popper;
    font-size: $--tooltip-font-size;
    line-height: 1.2;
    min-width: 10px;
    word-wrap: break-word;

    // add author: tangdm
    box-shadow: 0 0 8px #e8e8e8;

    .popper__arrow,
    .popper__arrow::after {
      position: absolute;
      display: block;
      width: 0;
      height: 0;
      border-color: transparent;
      border-style: solid;
    }

    .popper__arrow {
      border-width: $--tooltip-arrow-size;
    }

    .popper__arrow::after {
      content: " ";
      border-width: 5px;
    }

    &[x-placement^="top"] {
      margin-bottom: #{$--tooltip-arrow-size + 6px};
    }

    &[x-placement^="top"] .popper__arrow {
      bottom: -$--tooltip-arrow-size;
      border-top-color: $--tooltip-border-color;
      border-bottom-width: 0;

      &::after {
        bottom: 1px;
        margin-left: -5px;

        // update author: tangdm [code] border-top-color: $--tooltip-fill;
        border-top-color: transparent;
        border-bottom-width: 0;
      }
    }

    &[x-placement^="bottom"] {
      margin-top: #{$--tooltip-arrow-size + 6px};
    }

    &[x-placement^="bottom"] .popper__arrow {
      top: -$--tooltip-arrow-size;
      border-top-width: 0;
      border-bottom-color: $--tooltip-border-color;

      &::after {
        top: 1px;
        margin-left: -5px;
        border-top-width: 0;

        // update author: tangdm [code] border-bottom-color: $--tooltip-fill;
        border-bottom-color: transparent;
      }
    }

    &[x-placement^="right"] {
      margin-left: #{$--tooltip-arrow-size + 6px};
    }

    &[x-placement^="right"] .popper__arrow {
      left: -$--tooltip-arrow-size;
      border-right-color: $--tooltip-border-color;
      border-left-width: 0;

      &::after {
        bottom: -5px;
        left: 1px;

        // update author: tangdm [code] border-right-color: $--tooltip-fill;
        border-right-color: transparent;
        border-left-width: 0;
      }
    }

    &[x-placement^="left"] {
      margin-right: #{$--tooltip-arrow-size + 6px};
    }

    &[x-placement^="left"] .popper__arrow {
      right: -$--tooltip-arrow-size;
      border-right-width: 0;
      border-left-color: $--tooltip-border-color;

      &::after {
        right: 1px;
        bottom: -5px;
        margin-left: -5px;
        border-right-width: 0;
        // update author: tangdm [code] border-left-color: $--tooltip-fill;
        border-left-color: transparent;
      }
    }

    @include when(dark) {
      background: $--tooltip-fill;
      color: $--tooltip-color;
    }

    @include when(light) {
      background: $--tooltip-color;
      border: 1px solid $--tooltip-fill;

      &[x-placement^="top"] .popper__arrow {
        border-top-color: $--tooltip-fill;
        &::after {
          border-top-color: $--tooltip-color;
        }
      }
      &[x-placement^="bottom"] .popper__arrow {
        border-bottom-color: $--tooltip-fill;
        &::after {
          border-bottom-color: $--tooltip-color;
        }
      }
      &[x-placement^="left"] .popper__arrow {
        border-left-color: $--tooltip-fill;
        &::after {
          border-left-color: $--tooltip-color;
        }
      }
      &[x-placement^="right"] .popper__arrow {
        border-right-color: $--tooltip-fill;
        &::after {
          border-right-color: $--tooltip-color;
        }
      }
    }
  }
}





@include b(table) {
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    flex: 1;
    width: 100%;
    max-width: 100%;

	// update author: tangdm [code] font-size: 14px; background-color: $--color-white;
    color: $--table-font-color;

	// add author: tangdm
	@include mq($large) {
		font-size: $dg--font-large;
	}
	@include mq($medium) {
		font-size: $dg--font-medium;
	}
	@include mq($small) {
		font-size: $dg--font-small;
	}

    // add author: tangdm
    th.gutter {
        display: table-cell !important;
    }
    colgroup.gutter {
        display: table-cell !important;
    }

    // 数据为空
    @include e(empty-block) {
        min-height: 60px;
        text-align: center;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    @include e(empty-text) {
        // min-height doesn't work in IE10 and IE11 https://github.com/philipwalton/flexbugs#3-min-height-on-a-flex-container-wont-apply-to-its-flex-items
        // set empty text line height up to contrainer min-height as workaround.
        line-height: 60px;
        width: 50%;
        color: $--color-text-secondary;
    }

    // 展开行
    @include e(expand-column) {
        .cell {
            padding: 0;
            text-align: center;
        }
    }

    @include e(expand-icon) {
        position: relative;
        cursor: pointer;
        color: #666;
        font-size: 12px;
        transition: transform 0.2s ease-in-out;
        height: 20px;

        @include m(expanded) {
            transform: rotate(90deg);
        }

        > .el-icon {
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -5px;
            margin-top: -5px;
        }
    }

    @include e(expanded-cell) {
        background-color: $--color-white;

        // 纯属为了增加权重
        &[class*='cell'] {
            padding: 10px 50px;
        }

        &:hover {
            background-color: transparent !important;
        }

        // add author: tangdm
        .el-form-item__label {
            min-width: 80px;
            color: $--color-text-secondary;
        }
    }

    @include e(placeholder) {
        display: inline-block;
        width: 20px;
    }

    @include m(fit) {
        border-right: 0;
        border-bottom: 0;

        th.gutter,
        td.gutter {
            border-right-width: 1px;
        }
    }

    @include m(scrollable-x) {
        .el-table__body-wrapper {
            overflow-x: auto;
        }
    }

    @include m(scrollable-y) {
        .el-table__body-wrapper {
            overflow-y: auto;
        }
    }

    thead {
        color: $--table-header-font-color;
        font-weight: 500;

        &.is-group {
            th {
                // update author: tangdm [code] background: $--background-color-base;
                background: $--table-header-background-color;
            }
        }
    }

    th,
    td {
		// update author: tangdm [code] padding: 12px 0;
		font-weight: 400;
		@include mq($large) {
			padding: 14px 0 13px 0;
		}
		@include mq($medium) {
			padding: 12px 0 11px 0;
		}
		@include mq($small) {
			padding: 8px 0 7px 0;
		}

        min-width: 0;
        box-sizing: border-box;
        text-overflow: ellipsis;
        vertical-align: middle;
        position: relative;
        text-align: left;

        @include when(center) {
            text-align: center;
        }

        @include when(right) {
            text-align: right;
        }

        &.gutter {
            width: 15px;
            border-right-width: 0;
            border-bottom-width: 0;
            padding: 0;
        }

        &.is-hidden {
            > * {
                visibility: hidden;
            }
        }
    }

    @include m(medium) {
        th,
        td {
            // update author: tangdm [code] padding: 10px 0;
            @include mq($large) {
                padding: 20px 0 19px 0;
            }
            @include mq($medium) {
                padding: 14px 0 13px 0;
            }
            @include mq($small) {
                padding: 6px 0 5px 0;
            }
        }
    }

    @include m(small) {
        // delete author: tangdm [code] font-size: 12px;
        th,
        td {
            // update author: tangdm [code] padding: 8px 0;
            @include mq($large) {
                padding: 18px 0 17px 0;
            }
            @include mq($medium) {
                padding: 12px 0 11px 0;
            }
            @include mq($small) {
                padding: 4px 0 3px 0;
            }
        }
    }

    @include m(mini) {
        // delete author: tangdm [code] font-size: 12px;
        th,
        td {
            // update author: tangdm [code] padding: 6px 0;
            @include mq($large) {
                padding: 14px 0 13px 0;
            }
            @include mq($medium) {
                padding: 8px 0 7px 0;
            }
            @include mq($small) {
                padding: 4px 0 3px 0;
            }
        }
    }

    tr {
        // update author: tangdm [code] background-color: $--color-white;
        background-color: $dg--table-background;

        input[type='checkbox'] {
            margin: 0;
        }
    }

    th.is-leaf,
    td {
        border-bottom: $--table-border;
    }

    // add author: tangdm
    tr:last-child td {
        border-bottom: 0;
    }

    th.is-sortable {
        cursor: pointer;
    }

    th {
        white-space: nowrap;
        overflow: hidden;
        user-select: none;
		background-color: $--table-header-background-color;

        div {
            display: inline-block;
            padding-left: 10px;
            padding-right: 10px;
            line-height: 40px;
            box-sizing: border-box;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

		// add author: tangdm descript: adjust input height for mini
		.el-input {
			line-height: 24px;
		}

        > .cell {
            position: relative;
            word-wrap: normal;

            // update author: tangdm [code] text-overflow: ellipsis;
            text-overflow: inherit;

            display: inline-block;
            vertical-align: middle;
            width: 100%;
            box-sizing: border-box;

            &.highlight {
                color: $--color-primary;
            }
        }

        &.required > div::before {
            display: inline-block;
            content: '';
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #ff4d51;
            margin-right: 5px;
            vertical-align: middle;
        }
    }

    td {
        div {
            box-sizing: border-box;
        }

        &.gutter {
            width: 0;
        }
    }

    .cell {
        box-sizing: border-box;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        word-break: break-all;

		// update author: tangdm [code] line-height: 23px; padding-left: 10px; padding-right: 10px;
		line-height: 1.5;
        @include mq($large) {
            padding: 0 $dg--rem-large;
        }
        @include mq($medium) {
            padding: 0 $dg--rem-medium;
        }
        @include mq($small) {
            padding: 0 $dg--rem-small;
        }

        &.el-tooltip {
            white-space: nowrap;
            min-width: 50px;
        }
    }

    // 拥有多级表头
    @include m((group, border)) {
        border: $--table-border;

        @include share-rule(border-pseudo) {
            content: '';
            position: absolute;
            background-color: $--table-border-color;
            z-index: 1;
        }

        // 表格右部伪 border
        &::after {
            @include extend-rule(border-pseudo);
            top: 0;
            right: 0;
            width: 1px;
            height: 100%;
        }
    }

    // 表格底部伪 border，总是有的
    &::before {
        @include extend-rule(border-pseudo);
        left: 0;
        bottom: 0;
        width: 100%;
        height: 1px;
    }

    // add author: tangdm descript: 空数据时隐藏底部边框
    &.is-hidden-border-bottom::before {
        height: 0;
    }

    // add author: tangdm
    &.el-table--border::before {
        height: 1px;
    }

    // table--border
    @include m(border) {
		// add author: tangdm descript: 增加圆角
		border-radius: 2px;

        border-right: none;
        border-bottom: none;

        &.el-loading-parent--relative {
            border-color: transparent;
        }

        th,
        td {
            border-right: $--table-border;

            &:first-child .cell {
				// update author: tangdm [code] padding-left: 10px;
				padding-left: $dg--table-cell-padding-left;
            }
        }

        // add author: tangdm
        th:nth-last-child(2),
        td:last-child {
            border-right: 0;
        }

        th.gutter:last-of-type {
            border-bottom: $--table-border;
            border-bottom-width: 1px;
        }

        & th {
            border-bottom: $--table-border;
        }
    }

    @include m(hidden) {
        visibility: hidden;
    }

    @include e((fixed, fixed-right)) {
        position: absolute;
        top: 0;
        left: 0;
        overflow-x: hidden;
        overflow-y: hidden;
        box-shadow: $--table-fixed-box-shadow;

        &::before {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 1px;
            background-color: $--border-color-lighter;
            z-index: 4;
        }
    }

    // add author: tangdm descript: 空数据时隐藏底部边框
    &.is-hidden-border-bottom {
        @include e((fixed, fixed-right)) {
            &::before {
                height: 0;
            }
        }
    }

    @include e(fixed-right-patch) {
        position: absolute;
        top: -1px;
        right: 0;
        background-color: $--color-white;
        border-bottom: $--table-border;
    }

    @include e(fixed-right) {
        top: 0;
        left: auto;
        right: 0;

        .el-table__fixed-header-wrapper,
        .el-table__fixed-body-wrapper,
        .el-table__fixed-footer-wrapper {
            left: auto;
            right: 0;
        }
    }

    @include e(fixed-header-wrapper) {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 3;
    }

    @include e(fixed-footer-wrapper) {
        position: absolute;
        left: 0;
        bottom: 0;
        z-index: 3;

        & tbody td {
            border-top: $--table-border;
            background-color: $--table-row-hover-background-color;
            color: $--table-font-color;
        }
    }

    @include e(fixed-body-wrapper) {
        position: absolute;
        left: 0;
        top: 37px;
        overflow: hidden;
        z-index: 3;
    }

    @include e((header-wrapper, body-wrapper, footer-wrapper)) {
        width: 100%;
    }

    @include e(footer-wrapper) {
        margin-top: -1px;
        td {
            border-top: $--table-border;
        }
    }

    @include e((header, body, footer)) {
        table-layout: fixed;
        border-collapse: separate;
    }

    @include e((header-wrapper, footer-wrapper)) {
        overflow: hidden;

        & tbody td {
            background-color: $--table-row-hover-background-color;
            color: $--table-font-color;
        }
    }

    @include e(body-wrapper) {
        overflow: hidden;
        position: relative;

        @include when(scrolling-none) {
            ~ .el-table__fixed,
            ~ .el-table__fixed-right {
                box-shadow: none;
            }
        }

        @include when(scrolling-left) {
            ~ .el-table__fixed {
                box-shadow: none;
            }
        }

        @include when(scrolling-right) {
            ~ .el-table__fixed-right {
                box-shadow: none;
            }
        }

        .el-table--border {
            @include when(scrolling-right) {
                ~ .el-table__fixed-right {
                    border-left: $--table-border;
                }
            }

            @include when(scrolling-left) {
                ~ .el-table__fixed {
                    border-right: $--table-border;
                }
            }
        }
    }

    .caret-wrapper {
        display: inline-flex;
        flex-direction: column;
        align-items: center;

		// update author: tangdm [code] height: 34px; width: 24px;
		width: 26px;
		height: 14px;

        vertical-align: middle;
        cursor: pointer;
        overflow: initial;
        position: relative;
    }

    .sort-caret {
        width: 0;
        height: 0;
        border: solid 5px transparent;
        position: absolute;

		// update author: tangdm [code] left: 7px;
        left: 8px;

        &.ascending {
			// update author: tangdm [code]  border-bottom-color: $--color-text-placeholder; top: 5px;
			border-bottom-color: $dg--table-sort-caret-color;
            border-top: 0;
			top: 1px;
			// update-end
        }

        &.descending {
			// update-start author: tangdm [code]  border-top-color: $--color-text-placeholder; bottom: 7px;
			border-top-color: $dg--table-sort-caret-color;
            border-bottom: 0;
			bottom: 1px;
			// update-end
        }
    }

    .ascending .sort-caret.ascending {
        border-bottom-color: $--color-primary;
    }

    .descending .sort-caret.descending {
        border-top-color: $--color-primary;
    }

    .hidden-columns {
        visibility: hidden;
        position: absolute;
        z-index: -1;
    }

    @include m(striped) {
        & .el-table__body {
            & tr.el-table__row--striped {
                td {
                    // update author: tangdm [code] background: #fafafa;
                    background: $--table-header-background-color;
                }

                &.current-row td {
                    background-color: $--table-current-row-background-color;
                }
            }
        }
    }

    @include e(body) {
        tr.hover-row {
            &,
            &.el-table__row--striped {
                &,
                &.current-row {
                    > td {
                        background-color: $--table-row-hover-background-color;
                    }
                }
            }
        }

        tr.current-row > td {
            background-color: $--table-current-row-background-color;
        }
    }

    @include e(column-resize-proxy) {
        position: absolute;
        left: 200px;
        top: 0;
        bottom: 0;
        width: 0;
        border-left: $--table-border;
        z-index: 10;
    }

    @include e(column-filter-trigger) {
        display: inline-block;
		cursor: pointer;

		// update author: tangdm [code] line-height: 34px;
        line-height: 1.5;

        & i {
            color: $--color-info;
            font-size: 12px;
            transform: scale(0.75);
        }
    }

    @include m(enable-row-transition) {
        .el-table__body td {
            transition: background-color 0.25s ease;
        }
    }

    @include m(enable-row-hover) {
        .el-table__body tr:hover > td {
            background-color: $--table-row-hover-background-color;
        }
    }

    @include m(fluid-height) {
        .el-table__fixed,
        .el-table__fixed-right {
            bottom: 0;
            overflow: hidden;
        }
    }

    [class*='el-table__row--level'] {
        .el-table__expand-icon {
            display: inline-block;
            width: 20px;
            line-height: 20px;
            height: 20px;
            text-align: center;
            margin-right: 3px;
        }
    }
}






@include b(table-column) {
    @include m(selection) {
        .cell {
            padding-left: 14px;
            padding-right: 14px;
        }
    }
}

@include b(table-filter) {
    border: solid 1px $--border-color-lighter;
    border-radius: 2px;
    background-color: $--color-white;
    box-shadow: $--dropdown-menu-box-shadow;
    box-sizing: border-box;
    margin: 2px 0;

    /** used for dropdown mode */
    @include e(list) {
        padding: 5px 0;
        margin: 0;
        list-style: none;
        min-width: 100px;
    }

    @include e(list-item) {
        line-height: 36px;
        padding: 0 10px;
        cursor: pointer;
        font-size: $--font-size-base;

        &:hover {
            background-color: $--dropdown-menuItem-hover-fill;
            color: $--dropdown-menuItem-hover-color;
        }

        @include when(active) {
            background-color: $--color-primary;
            color: $--color-white;
        }
    }

    @include e(content) {
        min-width: 100px;
    }

    @include e(bottom) {
        border-top: 1px solid $--border-color-lighter;
        padding: 8px;

        button {
            background: transparent;
            border: none;
            cursor: pointer;
            padding: 0 3px;

            // update author: tangdm [code] font-size: $--font-size-small; color: $--color-text-regular;
            color: $--color-text-primary;
            @include mq($large) {
                font-size: $dg--font-large;
            }
            @include mq($medium) {
                font-size: $dg--font-medium;
            }
            @include mq($small) {
                font-size: $dg--font-small;
            }

            &:hover {
                color: $--color-primary;
            }

            &:focus {
                outline: none;
            }

            &.is-disabled {
                color: $--disabled-color-base;
                cursor: not-allowed;
            }
        }
    }

    @include e(wrap) {
        max-height: 280px;
    }

    @include e(checkbox-group) {
        padding: 10px;

        label.el-checkbox {
            display: block;
            margin-right: 5px;
            margin-bottom: 8px;
            margin-left: 5px;
        }

        .el-checkbox:last-child {
            margin-bottom: 0;
        }
    }
}



// create author:lutz


@include b(date-table) {
    font-size: 12px;
    user-select: none;

    @include when(week-mode) {
        .el-date-table__row {
            &:hover {
                div {
                    background-color: $--datepicker-inrange-background-color;
                }
                td.available:hover {
                    // update author:lutz [code] color: $--datepicker-font-color
                    color: $--color-primary;
                }
                td:first-child div {
                    margin-left: 5px;

                    /* update-start author:lutz
                    [code]
                        border-top-left-radius: 15px;
                        border-bottom-left-radius: 15px;
                    */
                    border-top-left-radius: $dg--datepicker-date-table-row-hover-radius;
                    border-bottom-left-radius: $dg--datepicker-date-table-row-hover-radius;
                    // update-end
                }
                td:last-child div {
                    margin-right: 5px;

                    /* update-start author:lutz
                    [code]
                        border-top-left-radius: 15px;
                        border-bottom-left-radius: 15px;
                    */
                    border-top-right-radius: $dg--datepicker-date-table-row-hover-radius;
                    border-bottom-right-radius: $dg--datepicker-date-table-row-hover-radius;
                    // update-end
                }
            }

            &.current div {
                background-color: $--datepicker-inrange-background-color;
            }
        }
    }

    td {
        width: 32px;
        height: 30px;
        padding: 4px 0;
        box-sizing: border-box;
        text-align: center;
        cursor: pointer;
        position: relative;

        & div {
            /* update-start author:lutz describe:选中和今日的高度与禁用高度不同
            [code]
                height: 30px;
                padding: 3px 0;
            */
            height: $dg--datepicker-active-width;
            padding: 0;
            // update-end

            box-sizing: border-box;
        }

        & span {
            /* update-start author:lutz
            [code]
                width: 24px;
                height: 24px;
                line-height: 24px;
            */
            width: $dg--datepicker-active-width;
            height: $dg--datepicker-active-width;
            line-height: $dg--datepicker-active-width;
            // update-end

            display: block;
            margin: 0 auto;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);

            // update author:lutz describe:显示矩形 [code] border-radius: 50%;
            border-radius: $dg--datepicker-active-background-border-radius;
        }

        &.next-month,
        &.prev-month {
            color: $--datepicker-off-font-color;

            // create author:lutz describe:下个月鼠标经过;
            & span {
                &:hover {
                    color: $--color-primary;
                    background-color: $dg--datepicker-today-background;
                }
            }
        }

        &.today {
            position: relative;

            span {
                color: $--color-primary;
                font-weight: bold;

                // create-start author:lutz describe:默认今天的样式修改
                border: 1px solid $--color-primary;
                box-sizing: border-box;
				border-radius: 2px;
                // create-end
            }

            &.start-date span,
            &.end-date span {
                color: $--color-white;
            }

            // create author:lutz describe:今日日期禁用时样式
            &.disabled {
                span {
                    color: $--disabled-color-base;
                    border: 1px solid $--disabled-border-base;
                }
            }
        }

        &.available:hover {
            color: $--datepicker-hover-font-color;

            // create author:lutz describe:鼠标经过样式
            & span {
                background-color: $dg--datepicker-today-background;
            }

            // create author:lutz describe:周的时候鼠标经过背景
            &.in-range span {
                background-color: $--datepicker-inrange-hover-background-color;
            }
        }

        &.in-range div {
            background-color: $--datepicker-inrange-background-color;
            &:hover {
                background-color: $--datepicker-inrange-hover-background-color;
            }
        }

        &.current:not(.disabled) span {
            color: $--color-white;
            background-color: $--datepicker-active-color;
        }
        &.start-date div,
        &.end-date div {
            color: $--color-white;
        }

        &.start-date span,
        &.end-date span {
            background-color: $--datepicker-active-color;

			// add author: tangdm descript: 增加圆角方式
			border-radius: 2px;

            // create author:lutz describe:周的时候鼠标经过背景
            &:hover {
                background-color: $--color-primary;
            }
        }

        &.start-date div {
            margin-left: 5px;

            /* update-start author:lutz
            [code]
                border-top-left-radius: 15px;
                border-bottom-left-radius: 15px;
            */
            border-top-left-radius: $dg--datepicker-active-background-border-radius;
            border-bottom-left-radius: $dg--datepicker-active-background-border-radius;
            // update
        }

        &.end-date div {
            margin-right: 5px;

            /* update-start author:lutz
            [code]
                border-top-right-radius: 15px;
                border-bottom-right-radius: 15px;
            */
            border-top-right-radius: $dg--datepicker-active-background-border-radius;
            border-bottom-right-radius: $dg--datepicker-active-background-border-radius;
            // update
        }

        &.disabled div {
            opacity: 1;
            cursor: not-allowed;

            /*
            update-start author:lutz describe:禁用样式变量抽取
            [code]
                background-color: $--background-color-base;
                color: $--color-text-placeholder;
            */
            background-color: $--disabled-fill-base;
            color: $--disabled-color-base;
        }

        &.selected div {
            margin-left: 5px;
            margin-right: 5px;
            background-color: $--datepicker-inrange-background-color;

            // update author:lutz [code] border-radius: 15px;
            border-radius: $dg--datepicker-active-background-border-radius;

            &:hover {
                background-color: $--datepicker-inrange-hover-background-color;
            }
        }

        &.selected span {
            background-color: $--datepicker-active-color;
            color: $--color-white;

            // update author:lutz [code] border-radius: 15px;
            border-radius: $dg--datepicker-active-background-border-radius;
        }

        // create author:lutz describe:多选的时候鼠标经过背景
        &.selected.available {
            &:hover {
                span {
                    background-color: $--color-primary;
                }
            }
        }

        &.week {
            font-size: 80%;
            color: $--datepicker-header-font-color;
        }
    }

    th {
        padding: 5px;
        color: $--datepicker-header-font-color;
        font-weight: 400;
        border-bottom: solid 1px $--border-color-lighter;
    }
}


// create author:lutz


@include b(month-table) {
    font-size: 12px;
    margin: -1px;
    border-collapse: collapse;

    td {
        text-align: center;
        padding: 8px 0px;
        cursor: pointer;
        & div {
            height: 48px;
            padding: 6px 0;
            box-sizing: border-box;
        }
        &.today {
            .cell {
                color: $--color-primary;
                font-weight: bold;

                // create-start author:lutz
                border: 1px solid $--color-primary;
                box-sizing: border-box;
                // create-end
            }
            &.start-date .cell,
            &.end-date .cell {
                color: $--color-white;
            }

            // create author:lutz describe:当月日期禁用时样式
            &.disabled {
                a {
                    color: $--disabled-color-base;
                    border: 1px solid $--disabled-border-base;
                }
            }
        }

        &.disabled .cell {
            background-color: $--background-color-base;
            cursor: not-allowed;
            color: $--color-text-placeholder;

            &:hover {
                color: $--color-text-placeholder;
            }
        }

        .cell {
            width: 60px;
            height: 36px;
            display: block;
            line-height: 36px;
            color: $--datepicker-font-color;
            margin: 0 auto;

            // update author:lutz describe:不需要圆角  [code] border-radius: 18px;
            border-radius: unset;

            &:hover {
                // update author:lutz [code] color: $--datepicker-hover-font-color;
                color: $--color-primary;

                // create author:lutz describe:鼠标经过样式
                background-color: $dg--datepicker-today-background;
            }
        }

        &.in-range div {
            background-color: $--datepicker-inrange-background-color;
            &:hover {
                background-color: $--datepicker-inrange-hover-background-color;
            }
        }
        &.start-date div,
        &.end-date div {
            color: $--color-white;
        }

        &.start-date .cell,
        &.end-date .cell {
            color: $--color-white;
            background-color: $--datepicker-active-color;
        }

        &.start-date div {
            /* update-start
            [code]
              border-top-left-radius: 24px;
              border-bottom-left-radius: 24px;
            */
            border-top-left-radius: $dg--datepicker-month-table-checked-radius;
            border-bottom-left-radius: $dg--datepicker-month-table-checked-radius;
        }

        &.end-date div {
            /* update-start
            [code]
              border-top-right-radius: 24px;
              border-bottom-right-radius: 24px;
            */
            border-top-right-radius: $dg--datepicker-month-table-checked-radius;
            border-bottom-right-radius: $dg--datepicker-month-table-checked-radius;
        }

        &.current:not(.disabled) .cell {
            // update author:lutz [code] color: $--datepicker-active-color;
            color: $--color-white;

            // create author:lutz
            background-color: $--datepicker-active-color;
        }
    }
}


// create author:lutz


@include b(year-table) {
    font-size: 12px;
    margin: -1px;
    border-collapse: collapse;

    .el-icon {
        color: $--datepicker-icon-color;
    }

    td {
        text-align: center;
        padding: 20px 3px;
        cursor: pointer;

        &.today {
            .cell {
                color: $--color-primary;
                font-weight: bold;

                // create-start author:lutz
                border: 1px solid $--color-primary;
                box-sizing: border-box;
                // create-end
            }

            // create author:lutz describe:当年日期禁用时样式
            &.disabled {
                a {
                    color: $--disabled-color-base;
                    border: 1px solid $--disabled-border-base;
                }
            }
        }

        &.disabled .cell {
            background-color: $--background-color-base;
            cursor: not-allowed;
            color: $--color-text-placeholder;

            &:hover {
                color: $--color-text-placeholder;
            }
        }

        .cell {
            width: 48px;
            height: 32px;
            display: block;
            line-height: 32px;
            color: $--datepicker-font-color;
            margin: 0 auto;

            &:hover {
                // update author:lutz [code] color: $--datepicker-hover-font-color;
                color: $--color-primary;

                // create author:lutz describe:鼠标经过样式
                background-color: $dg--datepicker-today-background;
            }
        }

        &.current:not(.disabled) .cell {
            // update author:lutz [code] color: $--datepicker-active-color;
            color: $--color-white;

            // create author:lutz
            background-color: $--datepicker-active-color;
        }
    }
}



@include b(time-spinner) {
  &.has-seconds {
    .el-time-spinner__wrapper {
      width: 33.3%;
    }
  }

  @include e(wrapper) {
    max-height: 190px;
    overflow: auto;
    display: inline-block;
    width: 50%;
    vertical-align: top;
    position: relative;

    & .el-scrollbar__wrap:not(.el-scrollbar__wrap--hidden-default) {
      padding-bottom: 15px;
    }

    @include when(arrow) {
      box-sizing: border-box;
      text-align: center;
      overflow: hidden;

      .el-time-spinner__list {
        transform: translateY(-32px);
      }

      .el-time-spinner__item:hover:not(.disabled):not(.active) {
        background: $--color-white;
        cursor: default;
      }
    }
  }

  @include e(arrow) {
    font-size: 12px;
    color: $--color-text-secondary;
    position: absolute;
    left: 0;
    width: 100%;
    z-index: $--index-normal;
    text-align: center;
    height: 30px;
    line-height: 30px;
    cursor: pointer;

    &:hover {
      color: $--color-primary;
    }

    &.el-icon-arrow-up {
      top: 10px;
    }

    &.el-icon-arrow-down {
      bottom: 10px;
    }
  }

  @include e(input) {
    &.el-input {
      width: 70%;

      .el-input__inner {
        padding: 0;
        text-align: center;
      }
    }
  }

  @include e(list) {
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;

    &::after,
    &::before {
      content: '';
      display: block;
      width: 100%;
      height: 80px;
    }
  }

  @include e(item) {
    height: 32px;
    line-height: 32px;
    font-size: 12px;
    color: $--color-text-regular;

    &:hover:not(.disabled):not(.active) {
      background: $--background-color-base;
      cursor: pointer;
    }

    &.active:not(.disabled) {
      color: $--color-text-primary;
      font-weight: bold;
    }

    &.disabled {
      color: $--color-text-placeholder;
      cursor: not-allowed;
    }
  }
}






@include b(date-editor) {
    position: relative;
    display: inline-block;
    text-align: left;

    &.el-input,
    &.el-input__inner {
        width: 220px;
    }

    @include m((monthrange)) {
        &.el-input,
        &.el-input__inner {
            width: 300px;
        }
    }

    @include m((daterange, timerange)) {
        &.el-input,
        &.el-input__inner {
            // update author: tangdm [code] width: 350px;
            width: 390px;
        }
    }

    @include m(datetimerange) {
        &.el-input,
        &.el-input__inner {
            width: 400px;
        }
    }

    @include m(dates) {
        .el-input__inner {
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }

    .el-icon-circle-close {
        cursor: pointer;
    }

    .el-range__icon {
        font-size: 14px;
        margin-left: -5px;
        color: $--color-text-placeholder;
        float: left;

        // update author:lutz [code] line-height: 32px
        //line-height: 24px;
		@include mq($large) {
			line-height: 30px;
		}
		@include mq($medium) {
			line-height: 26px;
		}
		@include mq($small) {
			line-height: 22px;
		}
    }

    .el-range-input {
        appearance: none;
        border: none;
        outline: none;
        display: inline-block;
        height: 100%;
        margin: 0;
        padding: 0;
        width: 39%;
        text-align: center;

        // update author: tangdm [code] font-size: $--font-size-base;
        @include mq($large) {
            font-size: $dg--font-large;
        }
        @include mq($medium) {
            font-size: $dg--font-medium;
        }
        @include mq($small) {
            font-size: $dg--font-small;
        }

        // update author: tangdm [code] $--color-text-regular
        color: $--color-text-primary;

        &::placeholder {
            color: $--color-text-placeholder;
        }
    }

    .el-range-separator {
        display: inline-block;
        height: 100%;
        padding: 0 5px;
        margin: 0;
        text-align: center;
        font-size: 14px;

        // update author:lutz [code] line-height: 32px
        // line-height: 24px;
		@include mq($large) {
			line-height: 30px;
		}
		@include mq($medium) {
			line-height: 26px;
		}
		@include mq($small) {
			line-height: 22px;
            font-size: 12px;
		}
        width: 5%;
        color: $--color-text-primary;
    }

    .el-range__close-icon {
        font-size: 14px;
        color: $--color-text-placeholder;
        width: 25px;
        display: inline-block;
        float: right;

        // update author:tangdm [code] line-height: 32px;
        @include mq($large) {
            line-height: 24px;
        }
        @include mq($medium) {
            line-height: 22px;
        }
        @include mq($small) {
            line-height: 18px;
        }
    }
}

@include b(range-editor) {
    &.el-input__inner {
        display: inline-flex;
        align-items: center;
        // update author: tangdm [code] padding: 3px 10px;
        padding: 0 12px;
    }

    .el-range-input {
        line-height: 1;
    }

    @include when(active) {
        border-color: $--color-primary;

        &:hover {
            border-color: $--color-primary;
        }
    }

    @include m(medium) {
        &.el-input__inner {
            height: $--input-medium-height;
        }

        .el-range-separator {
            line-height: 28px;
            font-size: $--input-medium-font-size;
        }

        .el-range-input {
            font-size: $--input-medium-font-size;
        }

        .el-range__icon,
        .el-range__close-icon {
            line-height: 28px;
        }
    }

    @include m(small) {
        &.el-input__inner {
            height: $--input-small-height;
        }

        .el-range-separator {
            line-height: 24px;
            font-size: $--input-small-font-size;
        }

        .el-range-input {
            font-size: $--input-small-font-size;
        }

        .el-range__icon,
        .el-range__close-icon {
            line-height: 24px;
        }
    }

    @include m(mini) {
        &.el-input__inner {
            height: $--input-mini-height;
        }

        .el-range-separator {
            line-height: 20px;
            font-size: $--input-mini-font-size;
        }

        .el-range-input {
            font-size: $--input-mini-font-size;
        }

        .el-range__icon,
        .el-range__close-icon {
            line-height: 20px;
        }
    }

    @include when(disabled) {
        background-color: $--input-disabled-fill;
        border-color: $--input-disabled-border;
        color: $--input-disabled-color;
        cursor: not-allowed;

        &:hover,
        &:focus {
            border-color: $--input-disabled-border;
        }

        input {
            background-color: $--input-disabled-fill;
            color: $--input-disabled-color;
            cursor: not-allowed;
            &::placeholder {
                color: $--input-disabled-placeholder-color;
            }
        }

        .el-range-separator {
            color: $--input-disabled-color;
        }
    }
}






@include b(picker-panel) {
    border: 1px solid $--datepicker-border-color;
    box-shadow: $--box-shadow-light;
    border-radius: $--border-radius-base;
    line-height: 30px;
    margin: 5px 0;

    // udpate author: tangdm [code] color: $--color-text-regular; background: $--color-white;
    color: $--color-text-primary;
    background: $dg--picker-panel-background;

    @include e((body, body-wrapper)) {
        &::after {
            content: '';
            display: table;
            clear: both;
        }
    }

    @include e(content) {
        position: relative;
        margin: 15px;
    }

    @include e(footer) {
        border-top: 1px solid $--datepicker-inner-border-color;
        padding: 4px;
        text-align: right;

        // update author: tangdm [code] background-color: $--color-white;
        background-color: $dg--picker-panel-background;
        position: relative;
        font-size: 0;
    }

    @include e(shortcut) {
        display: block;
        width: 100%;
        border: 0;
        background-color: transparent;
        line-height: 28px;
        font-size: 14px;
        color: $--datepicker-font-color;
        padding-left: 12px;
        text-align: left;
        outline: none;
        cursor: pointer;

        &:hover {
            color: $--datepicker-hover-font-color;
        }

        &.active {
            background-color: #e6f1fe;
            color: $--datepicker-active-color;
        }
    }

    @include e(btn) {
        border: 1px solid #dcdcdc;
        color: #333;
        line-height: 24px;
        border-radius: 2px;
        padding: 0 20px;
        cursor: pointer;
        background-color: transparent;
        outline: none;
        font-size: 12px;

        &[disabled] {
            color: #cccccc;
            cursor: not-allowed;
        }
    }

    @include e(icon-btn) {
        font-size: 12px;
        color: $--datepicker-icon-color;
        border: 0;
        background: transparent;
        cursor: pointer;
        outline: none;
        margin-top: 8px;

        &:hover {
            color: $--datepicker-hover-font-color;
        }

        @include when(disabled) {
            color: $--font-color-disabled-base;

            &:hover {
                cursor: not-allowed;
            }
        }
    }

    @include e(link-btn) {
        vertical-align: middle;
    }
}

.el-picker-panel *[slot='sidebar'],
.el-picker-panel__sidebar {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 110px;
    border-right: 1px solid $--datepicker-inner-border-color;
    box-sizing: border-box;
    padding-top: 6px;

    // update author: tangdm [code] background-color: $--color-white;
    background-color: $dg--picker-panel-background;
    overflow: auto;
}

.el-picker-panel *[slot='sidebar'] + .el-picker-panel__body,
.el-picker-panel__sidebar + .el-picker-panel__body {
    margin-left: 110px;
}


@include b(date-picker) {
    width: 322px;

    &.has-sidebar.has-time {
        width: 434px;
    }

    &.has-sidebar {
        width: 438px;
    }

    &.has-time .el-picker-panel__body-wrapper {
        position: relative;
    }

    .el-picker-panel__content {
        width: 292px;
    }

    table {
        table-layout: fixed;
        width: 100%;
    }

    @include e(editor-wrap) {
        position: relative;
        display: table-cell;
        padding: 0 5px;
    }

    @include e(time-header) {
        position: relative;
        border-bottom: 1px solid $--datepicker-inner-border-color;
        font-size: 12px;
        padding: 8px 5px 5px 5px;
        display: table;
        width: 100%;
        box-sizing: border-box;
    }

    @include e(header) {
        margin: 12px;
        text-align: center;

        @include m(bordered) {
            margin-bottom: 0;
            padding-bottom: 12px;
            border-bottom: solid 1px $--border-color-lighter;

			// update author: tangdm [code] padding-bottom: 12px;
			@include mq($small) {
				padding-bottom: 4px;
			}

            & + .el-picker-panel__content {
                margin-top: 0;
            }
        }
    }

    @include e(header-label) {
        font-size: 16px;
        font-weight: 500;
        padding: 0 5px;
        line-height: 22px;
        text-align: center;
        cursor: pointer;
        // update author: tangdm [code] color: $--color-text-regular;
        color: $--color-text-primary;

		// update author: tangdm [code] font-size: 16px;
		@include mq($small) {
			font-size: 14px;
		}

        &:hover {
            color: $--datepicker-hover-font-color;
        }

        &.active {
            color: $--datepicker-active-color;
        }
    }

    @include e(prev-btn) {
        float: left;
    }

    @include e(next-btn) {
        float: right;
    }

    @include e(time-wrap) {
        padding: 10px;
        text-align: center;
    }

    @include e(time-label) {
        float: left;
        cursor: pointer;
        line-height: 30px;
        margin-left: 10px;
    }
}



@include b(date-range-picker) {
  width: 646px;

  &.has-sidebar {
    width: 756px;
  }

  table {
    table-layout: fixed;
    width: 100%;
  }

  .el-picker-panel__body {
    min-width: 513px;
  }

  .el-picker-panel__content {
    margin: 0;
  }

  @include e(header) {
    position: relative;
    text-align: center;
    height: 28px;

    [class*=arrow-left] {
      float: left;
    }

    [class*=arrow-right] {
      float: right;
    }

    div {
      font-size: 16px;
      font-weight: 500;
      margin-right: 50px;
    }
  }

  @include e(content) {
    float: left;
    width: 50%;
    box-sizing: border-box;
    margin: 0;
    padding: 16px;

    @include when(left) {
      border-right: 1px solid $--datepicker-inner-border-color;
    }
    .el-date-range-picker__header {

      div {
        margin-left: 50px;
        margin-right: 50px;
      }
    }
  }

  @include e(editors-wrap) {
    box-sizing: border-box;
    display: table-cell;

    @include when(right) {
      text-align: right;
    }
  }

  @include e(time-header) {
    position: relative;
    border-bottom: 1px solid $--datepicker-inner-border-color;
    font-size: 12px;
    padding: 8px 5px 5px 5px;
    display: table;
    width: 100%;
    box-sizing: border-box;

    > .el-icon-arrow-right {
      font-size: 20px;
      vertical-align: middle;
      display: table-cell;
      color: $--datepicker-icon-color;
    }
  }

  @include e(time-picker-wrap) {
    position: relative;
    display: table-cell;
    padding: 0 5px;

    .el-picker-panel {
      position: absolute;
      top: 13px;
      right: 0;
      z-index: 1;
      background: $--color-white;
    }
  }
}



@include b(time-range-picker) {
  width: 354px;
  overflow: visible;

  @include e(content) {
    position: relative;
    text-align: center;
    padding: 10px;
  }

  @include e(cell) {
    box-sizing: border-box;
    margin: 0;
    padding: 4px 7px 7px;
    width: 50%;
    display: inline-block;
  }

  @include e(header) {
    margin-bottom: 5px;
    text-align: center;
    font-size: 14px;
  }

  @include e(body) {
    border-radius:2px;
    border: 1px solid $--datepicker-border-color;
  }
}




@include b(time-panel) {
    margin: 5px 0;
    border: solid 1px $--datepicker-border-color;

    // update author: tangdm [code] background-color: $--color-white;
    background-color: $dg--picker-panel-background;
    box-shadow: $--box-shadow-light;
    border-radius: 2px;
    position: absolute;
    width: 180px;
    left: 0;
    z-index: $--index-top;
    user-select: none;
    box-sizing: content-box;

    @include e(content) {
        font-size: 0;
        position: relative;
        overflow: hidden;

        &::after,
        &::before {
            content: '';
            top: 50%;
            position: absolute;
            margin-top: -15px;
            height: 32px;
            z-index: -1;
            left: 0;
            right: 0;
            box-sizing: border-box;
            padding-top: 6px;
            text-align: left;
            border-top: 1px solid $--border-color-light;
            border-bottom: 1px solid $--border-color-light;
        }

        &::after {
            left: 50%;
            margin-left: 12%;
            margin-right: 12%;
        }

        &::before {
            padding-left: 50%;
            margin-right: 12%;
            margin-left: 12%;
        }

        &.has-seconds {
            &::after {
                left: calc(100% / 3 * 2);
            }

            &::before {
                padding-left: calc(100% / 3);
            }
        }
    }

    @include e(footer) {
        border-top: 1px solid $--datepicker-inner-border-color;
        padding: 4px;
        height: 36px;
        line-height: 25px;
        text-align: right;
        box-sizing: border-box;
    }

    @include e(btn) {
        border: none;
        line-height: 28px;
        padding: 0 5px;
        margin: 0 5px;
        cursor: pointer;
        background-color: transparent;
        outline: none;
        font-size: 12px;
        color: $--color-text-primary;

        &.confirm {
            font-weight: 800;
            color: $--datepicker-active-color;
        }
    }
}










.time-select {
    margin: 5px 0;
    min-width: 0;
}

.time-select .el-picker-panel__content {
    max-height: 200px;
    margin: 0;
}

.time-select-item {
    // update author: lutz [code] padding: 8px 10px; font-size: 14px; ine-height: 20px;
    padding: 6px 32px;
    line-height: 1.5;
    @include mq($large) {
        font-size: $dg--font-large;
    }
    @include mq($medium) {
        font-size: $dg--font-medium;
    }
    @include mq($small) {
        font-size: $dg--font-small;
    }
}

.time-select-item.selected:not(.disabled) {
    color: $--color-primary;
    font-weight: bold;
}

// update author:lutz describe:与 .time-select-item.disabled 拖拽了位置
.time-select-item:hover {
    // create author:lutz
    //color: $--color-primary;

    background-color: $--background-color-base;

    // remove author: tangdm [code] font-weight: bold;
    //font-weight: bold;
    cursor: pointer;
}

.time-select-item.disabled {
    color: $--datepicker-border-color;
    cursor: not-allowed;
}














@include b(popover) {
  position: absolute;
  background: $--popover-background-color;
  min-width: 150px;
  border-radius: 4px;
  border: 1px solid $--popover-border-color;
  padding: $--popover-padding;
  z-index: $--index-popper;
  color: $--color-text-regular;
  line-height: 1.4;
  text-align: justify;
  font-size: $--popover-font-size;
  box-shadow: $--box-shadow-light;
  word-break: break-all;

  @include m(plain) {
    padding: $--popover-padding-large;
  }

  @include e(title) {
    color: $--popover-title-font-color;
    font-size: $--popover-title-font-size;
    line-height: 1;
    margin-bottom: 12px;
  }

  @include e(reference) {
    &:focus:not(.focusing), &:focus:hover {
      outline-width: 0;
    }
  }

  &:focus:active, &:focus {
    outline-width: 0;
  }
}


// create author:lutz








@include b(message-box) {
    display: inline-block;
    width: $--msgbox-width;

    // update author:lutz padding-bottom: 10px;
    padding-bottom: 16px;

    vertical-align: middle;
    // update author: tangdm [code] background-color: $--color-white;
    background-color: $dg--message-box-background;
    border-radius: $--msgbox-border-radius;
    border: 1px solid $--border-color-lighter;
    font-size: $--messagebox-font-size;
    box-shadow: $--box-shadow-light;
    text-align: left;
    overflow: hidden;
    backface-visibility: hidden;

    @include e(wrapper) {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        text-align: center;

        &::after {
            content: '';
            display: inline-block;
            height: 100%;
            width: 0;
            vertical-align: middle;
        }
    }

    @include e(header) {
        position: relative;

        // update author:tangdm [code] padding: $--msgbox-padding-primary; padding-bottom: 10px;
        font-weight: bold;
        box-sizing: border-box;
        @include mq($large) {
            height: $dg--dialog-header-height-large;
            padding: 2 * $dg--rem-large 2 * $dg--rem-large 0;
        }
        @include mq($medium) {
            height: $dg--dialog-header-height-medium;
            padding: 2 * $dg--rem-medium 2 * $dg--rem-medium 0 ;
        }
        @include mq($small) {
            height: $dg--dialog-header-height-small;
            padding: 2 * $dg--rem-small 2 * $dg--rem-small 0 ;
        }
    }

    @include e(title) {
        padding-left: 0;
        margin-bottom: 0;

        // update author: tangdm [code] font-size: $--messagebox-font-size; line-height: 1;
        color: $--messagebox-title-color;
        line-height: 1.5;
        @include mq($large) {
            font-size: $dg--title-font-large;
        }
        @include mq($medium) {
            font-size: $dg--title-font-medium;
        }
        @include mq($small) {
            font-size: $dg--title-font-small;
        }
    }

    @include e(headerbtn) {
        position: absolute;

		// update author: tangdm [code] top: $--msgbox-padding-primary; right: $--msgbox-padding-primary;
        top: 20px;
        right: 20px;

        padding: 0;
        border: none;
        outline: none;
        background: transparent;
        font-size: $--message-close-size;
        cursor: pointer;

        .el-message-box__close {
            color: $--message-close-icon-color;
        }

        &:focus,
        &:hover {
            .el-message-box__close {
                color: $--message-close-hover-color;
            }
        }
    }

    @include e(content) {
        position: relative;

        // update author:lutz [code] padding: 10px $--msgbox-padding-primary;
        @include mq($large) {
            padding: $dg--rem-large 2 * $dg--rem-large;
        }
        @include mq($medium) {
            padding: $dg--rem-medium 2 * $dg--rem-medium;
        }
        @include mq($small) {
            padding: $dg--rem-small 2 * $dg--rem-small;
        }

        color: $--messagebox-content-color;
        font-size: $--messagebox-content-font-size;
    }

    @include e(input) {
        padding-top: 15px;

        & input.invalid {
            border-color: $--color-danger;
            &:focus {
                border-color: $--color-danger;
            }
        }
    }

    @include e(status) {
        position: absolute;

        // update author:lutz [code] top: 50%;
        top: 30%;
        transform: translateY(-50%);
        font-size: 24px !important;

        &::before {
            // 防止图标切割
            padding-left: 1px;
        }

        + .el-message-box__message {
            padding-left: 36px;
            padding-right: 12px;
        }

        &.el-icon-success {
            color: $--messagebox-success-color;
        }

        &.el-icon-info {
            color: $--messagebox-info-color;
        }

        &.el-icon-warning {
            color: $--messagebox-warning-color;
        }

        &.el-icon-error {
            color: $--messagebox-danger-color;
        }
    }

    @include e(message) {
        margin: 0;

        & p {
            margin: 0;
            line-height: 24px;
        }
    }

    @include e(errormsg) {
        color: $--color-danger;
        font-size: $--messagebox-error-font-size;
        min-height: 18px;
        margin-top: 2px;
    }

    @include e(btns) {
        // update author:lutz [code] padding: 5px 15px 0;
        @include mq($large) {
            padding: $dg--rem-large 2 * $dg--rem-large 2 * $dg--rem-large;
        }
        @include mq($medium) {
            padding: $dg--rem-medium 2 * $dg--rem-medium 2 * $dg--rem-medium;
        }
        @include mq($small) {
            padding: $dg--rem-small 2 * $dg--rem-small 2 * $dg--rem-small;
        }

        text-align: right;

        & button:nth-child(2) {
            margin-left: 10px;
        }
    }

    @include e(btns-reverse) {
        flex-direction: row-reverse;
    }

    // centerAlign 布局
    @include m(center) {
        padding-bottom: 30px;

        @include e(header) {
            padding-top: 30px;
        }

        @include e(title) {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        @include e(status) {
            position: relative;
            top: auto;
            padding-right: 5px;
            text-align: center;
            transform: translateY(-1px);
        }

        @include e(message) {
            margin-left: 0;
        }

        @include e((btns, content)) {
            text-align: center;
        }

        @include e(content) {
            $padding-horizontal: $--msgbox-padding-primary + 12px;

            padding-left: $padding-horizontal;
            padding-right: $padding-horizontal;
        }
    }
}

.msgbox-fade-enter-active {
    animation: msgbox-fade-in 0.3s;
}

.msgbox-fade-leave-active {
    animation: msgbox-fade-out 0.3s;
}

@keyframes msgbox-fade-in {
    0% {
        transform: translate3d(0, -20px, 0);
        opacity: 0;
    }
    100% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

@keyframes msgbox-fade-out {
    0% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
    100% {
        transform: translate3d(0, -20px, 0);
        opacity: 0;
    }
}





@include b(breadcrumb) {
    font-size: 14px;
    line-height: 1;
    @include utils-clearfix;

    @include e(separator) {
        margin: 0 9px;
        font-weight: bold;
        color: $--color-text-placeholder;

        &[class*='icon'] {
            margin: 0 6px;
            font-weight: normal;
        }
    }

    @include e(item) {
        float: left;

        @include e(inner) {
            color: $--color-text-regular;

            &.is-link,
            & a {
				// delete author: tangdm
				//font-weight: bold;

                text-decoration: none;
                transition: $--color-transition-base;

				// update author: tangdm [code] color: $--color-text-primary
                color: $--color-text-regular;

                &:hover {
                    color: $--color-primary;
                    cursor: pointer;
                }
            }
        }

        &:last-child {
            .el-breadcrumb__inner,
            .el-breadcrumb__inner a {
                &,
                &:hover {
                    font-weight: normal;
					cursor: text;

					// update author: tangdm [code] color: $--color-text-regular
                    color: $--color-text-primary;
                }
            }

            .el-breadcrumb__separator {
                display: none;
            }
        }
    }
}






@include b(form) {
    @include m(label-left) {
        & .el-form-item__label {
            text-align: left;
        }
    }
    @include m(label-top) {
        & .el-form-item__label {
            float: none;
            display: inline-block;
            text-align: left;
            padding: 0 0 10px 0;
        }
    }
    @include m(inline) {
        & .el-form-item {
            display: inline-block;
            margin-right: 10px;
			// update author: tangdm [code] vertical-align: top;
			vertical-align: middle;
        }
        & .el-form-item__label {
            float: none;
            display: inline-block;
        }
        & .el-form-item__content {
            display: inline-block;
			// update author: tangdm [code] vertical-align: top;
            vertical-align: middle;
        }
        &.el-form--label-top .el-form-item__content {
            display: block;
        }
    }
}

@include b(form-item) {
	// update author: tangdm [code] margin-bottom: 24px;
	margin-bottom: 20px;

    @include utils-clearfix;

    & .el-form-item {
        margin-bottom: 0;
    }

    & .el-input__validateIcon {
        display: none;
    }

    @include m(medium) {
        .el-form-item__label {
            line-height: 36px;
        }
        .el-form-item__content {
            line-height: 36px;
        }
    }
    @include m(small) {
        .el-form-item__label {
            line-height: 32px;
        }
        .el-form-item__content {
            line-height: 32px;
        }
        &.el-form-item {
            margin-bottom: 24px;
        }
        .el-form-item__error {
            padding-top: 2px;
        }
    }
    @include m(mini) {
        .el-form-item__label {
            line-height: 28px;
        }
        .el-form-item__content {
            line-height: 28px;
        }
        &.el-form-item {
            margin-bottom: 24px;
        }
        .el-form-item__error {
            padding-top: 1px;
        }
    }

    @include e(label-wrap) {
        float: left;
        .el-form-item__label {
            display: inline-block;
            float: none;
        }
    }

    @include e(label) {
        text-align: right;
        vertical-align: middle;
        float: left;
		// update author: tangdm [code] font-size: $--form-label-font-size; descript: 媒体查询
		@include mq($large) {
			font-size: $dg--font-large;
		}
		@include mq($medium) {
			font-size: $dg--font-medium;
		}
		@include mq($small) {
			font-size: $dg--font-small;
		}
		// update author: tangdm [code] color: $--color-text-regular;
        color: $--color-text-primary;
		// update author: tangdm [code] line-height: 40px;
		@include mq($large) {
			line-height: $dg--button-media-large-height;
		}
		@include mq($medium) {
			line-height: $dg--button-media-medium-height;
		}
		@include mq($small) {
			line-height: $dg--button-media-small-height;
		}

        padding: 0 12px 0 0;
        box-sizing: border-box;
    }
    
    @include e(content) {
		// update author: tangdm [code] line-height: 40px;
        position: relative;

        // add author: tangdm descript: fixed the IE 11 for the position
        //overflow: hidden;

		// update author: tangdm [code] font-size: 14px; descript: 媒体查询
		@include mq($large) {
			font-size: 14px;
            line-height: $dg--button-media-large-height;
		}
		@include mq($medium) {
			font-size: 14px;
            line-height: $dg--button-media-medium-height;
		}
		@include mq($small) {
			font-size: 12px;
            line-height: $dg--button-media-small-height;
		}
        @include utils-clearfix;

        .el-input-group {
            vertical-align: top;
        }
    }

    @include e(error) {
        color: $--color-danger;
        font-size: 12px;
        line-height: 1;
        padding-top: 4px;

        position: absolute;
        top: 100%;
        left: 0;

        @include m(inline) {
            position: relative;
            top: auto;
            left: auto;
            display: inline-block;
            margin-left: 10px;
        }
    }

    @include when(required) {
        @include pseudo('not(.is-no-asterisk)') {
            & > .el-form-item__label:before,
            & .el-form-item__label-wrap > .el-form-item__label:before {
                content: '*';
                color: $--color-danger;
                margin-right: 4px;
            }
        }
    }

    @include when(error) {
        & .el-input__inner,
        & .el-textarea__inner {
            &,
            &:focus {
                border-color: $--color-danger;
            }
        }
        & .el-input-group__append,
        & .el-input-group__prepend {
            & .el-input__inner {
                border-color: transparent;
            }
        }
        .el-input__validateIcon {
            color: $--color-danger;
        }
    }

    @include m(feedback) {
        .el-input__validateIcon {
            display: inline-block;
        }
    }
}





@include b(tabs) {
    @include e(header) {
        padding: 0;
        position: relative;
        margin: 0 0 15px;
    }
    @include e(active-bar) {
        position: absolute;
        bottom: 0;
        left: 0;
        height: 2px;
        background-color: $--color-primary;
        z-index: 1;
        transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
        list-style: none;
    }
    @include e(new-tab) {
        float: right;
        border: 1px solid #d3dce6;
        height: 18px;
        width: 18px;
        line-height: 18px;
        margin: 12px 0 9px 10px;
        border-radius: 3px;
        text-align: center;
        font-size: 12px;
        color: #d3dce6;
        cursor: pointer;
        transition: all 0.15s;

        .el-icon-plus {
            transform: scale(0.8, 0.8);
        }

        &:hover {
            color: $--color-primary;
        }
    }
    @include e(nav-wrap) {
        overflow: hidden;
        margin-bottom: -1px;
        position: relative;

        &::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 2px;
            background-color: $--border-color-light;
            z-index: $--index-normal;
        }

        @include when(scrollable) {
            padding: 0 20px;
            box-sizing: border-box;
        }
    }
    @include e(nav-scroll) {
        overflow: hidden;
    }
    @include e((nav-next, nav-prev)) {
        position: absolute;
        cursor: pointer;
        line-height: 44px;
        font-size: 12px;
        color: $--color-text-secondary;
    }
    @include e(nav-next) {
        right: 0;
    }
    @include e(nav-prev) {
        left: 0;
    }
    @include e(nav) {
        white-space: nowrap;
        position: relative;
        transition: transform 0.3s;
        float: left;
        z-index: #{$--index-normal + 1};

        @include when(stretch) {
            min-width: 100%;
            display: flex;
            & > * {
                flex: 1;
                text-align: center;
            }
        }
    }
    @include e(item) {
        padding: 0 20px;
        height: 40px;
        box-sizing: border-box;
        line-height: 40px;
        display: inline-block;
        list-style: none;
        font-weight: 500;
        color: $--color-text-secondary;
        position: relative;

        // update author: tangdm [code] font-size: 14px;
        @include mq($large) {
            font-size: $dg--font-large;
        }
        @include mq($medium) {
            font-size: $dg--font-medium;
        }
        @include mq($small) {
            font-size: $dg--font-small;
        }

        &:focus,
        &:focus:active {
            outline: none;
        }

        &:focus.is-active.is-focus:not(:active) {
            box-shadow: 0 0 2px 2px $--color-primary inset;
            border-radius: 3px;
        }

        & .el-icon-close {
            border-radius: 50%;
            text-align: center;
            transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
            margin-left: 5px;
            &:before {
                transform: scale(0.9);
                display: inline-block;
            }

            &:hover {
                background-color: $--color-text-placeholder;
                color: $--color-white;
            }
        }

        @include when(active) {
            color: $--color-primary;
        }

        &:hover {
            color: $--color-primary;
            cursor: pointer;
        }

        @include when(disabled) {
            color: $--disabled-color-base;
            cursor: default;
        }
    }
    @include e(content) {
        overflow: hidden;
        position: relative;
    }
    @include m(card) {
        > .el-tabs__header {
            border-bottom: 1px solid $--border-color-light;
        }
        > .el-tabs__header .el-tabs__nav-wrap::after {
            content: none;
        }
        > .el-tabs__header .el-tabs__nav {
            border: 1px solid $--border-color-light;
            border-bottom: none;
            border-radius: 2px;
            box-sizing: border-box;
        }
        > .el-tabs__header .el-tabs__active-bar {
            display: none;
        }
        > .el-tabs__header .el-tabs__item .el-icon-close {
            position: relative;
            font-size: 12px;
            width: 0;
            height: 14px;
            vertical-align: middle;
            line-height: 15px;
            overflow: hidden;
            top: -1px;
            right: -2px;
            transform-origin: 100% 50%;
        }
        > .el-tabs__header .el-tabs__item {
            // update author: tangdm [code] border-bottom: 1px solid transparent;
            border-bottom: 1px solid $--border-color-light;

            // add author: tangdm
            background: $--fill-base;

            border-left: 1px solid $--border-color-light;
            transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
                padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
            &:first-child {
                border-left: none;
            }
            &.is-closable {
                &:hover {
                    padding-left: 13px;
                    padding-right: 13px;

                    & .el-icon-close {
                        width: 14px;
                    }
                }
            }
            &.is-active {
                // update author: tangdm [code] border-bottom-color: $--color-white;
                border-bottom-color: $--fill-base;

                &.is-closable {
                    padding-left: 20px;
                    padding-right: 20px;

                    .el-icon-close {
                        width: 14px;
                    }
                }
            }
        }
    }
    @include m(border-card) {
        background: $--color-white;
        border: 1px solid $--border-color-base;
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);

        > .el-tabs__content {
            padding: 15px;
        }
        > .el-tabs__header {
            background-color: $--background-color-base;
            border-bottom: 1px solid $--border-color-light;
            margin: 0;
        }
        > .el-tabs__header .el-tabs__nav-wrap::after {
            content: none;
        }
        > .el-tabs__header .el-tabs__item {
            transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
            border: 1px solid transparent;
            margin-top: -1px;
            color: $--color-text-secondary;

            &:first-child {
                margin-left: -1px;
            }

            & + .el-tabs__item {
                margin-left: -1px;
            }

            &.is-active {
                color: $--color-primary;
                background-color: $--color-white;
                border-right-color: $--border-color-base;
                border-left-color: $--border-color-base;
            }
            &:not(.is-disabled):hover {
                color: $--color-primary;
            }
            &.is-disabled {
                color: $--disabled-color-base;
            }
        }

        > .el-tabs__header .is-scrollable .el-tabs__item:first-child {
            margin-left: 0;
        }
    }
    @include m((top, bottom)) {
        .el-tabs__item.is-top:nth-child(2),
        .el-tabs__item.is-bottom:nth-child(2) {
            padding-left: 0;
        }
        .el-tabs__item.is-top:last-child,
        .el-tabs__item.is-bottom:last-child {
            padding-right: 0;
        }

        &.el-tabs--border-card,
        &.el-tabs--card,
        .el-tabs--left,
        .el-tabs--right {
            > .el-tabs__header {
                .el-tabs__item:nth-child(2) {
                    padding-left: 20px;
                }
                .el-tabs__item:last-child {
                    padding-right: 20px;
                }
            }
        }
    }
    @include m(bottom) {
        .el-tabs__header.is-bottom {
            margin-bottom: 0;
            margin-top: 10px;
        }
        &.el-tabs--border-card {
            .el-tabs__header.is-bottom {
                border-bottom: 0;
                border-top: 1px solid $--border-color-base;
            }
            .el-tabs__nav-wrap.is-bottom {
                margin-top: -1px;
                margin-bottom: 0;
            }
            .el-tabs__item.is-bottom:not(.is-active) {
                border: 1px solid transparent;
            }
            .el-tabs__item.is-bottom {
                margin: 0 -1px -1px -1px;
            }
        }
    }
    @include m((left, right)) {
        overflow: hidden;

        .el-tabs__header.is-left,
        .el-tabs__header.is-right,
        .el-tabs__nav-wrap.is-left,
        .el-tabs__nav-wrap.is-right,
        .el-tabs__nav-scroll {
            height: 100%;
        }

        .el-tabs__active-bar.is-left,
        .el-tabs__active-bar.is-right {
            top: 0;
            bottom: auto;
            width: 2px;
            height: auto;
        }

        .el-tabs__nav-wrap.is-left,
        .el-tabs__nav-wrap.is-right {
            margin-bottom: 0;

            > .el-tabs__nav-prev,
            > .el-tabs__nav-next {
                height: 30px;
                line-height: 30px;
                width: 100%;
                text-align: center;
                cursor: pointer;

                i {
                    transform: rotateZ(90deg);
                }
            }
            > .el-tabs__nav-prev {
                left: auto;
                top: 0;
            }
            > .el-tabs__nav-next {
                right: auto;
                bottom: 0;
            }

            &.is-scrollable {
                padding: 30px 0;
            }

            &::after {
                height: 100%;
                width: 2px;
                bottom: auto;
                top: 0;
            }
        }

        .el-tabs__nav.is-left,
        .el-tabs__nav.is-right {
            float: none;
        }
        .el-tabs__item.is-left,
        .el-tabs__item.is-right {
            display: block;
        }
    }
    @include m(left) {
        .el-tabs__header.is-left {
            float: left;
            margin-bottom: 0;
            margin-right: 10px;
        }
        .el-tabs__nav-wrap.is-left {
            margin-right: -1px;
            &::after {
                left: auto;
                right: 0;
            }
        }
        .el-tabs__active-bar.is-left {
            right: 0;
            left: auto;
        }
        .el-tabs__item.is-left {
            text-align: right;
        }

        &.el-tabs--card {
            .el-tabs__active-bar.is-left {
                display: none;
            }
            .el-tabs__item.is-left {
                border-left: none;
                border-right: 1px solid $--border-color-light;
                border-bottom: none;
                border-top: 1px solid $--border-color-light;
                text-align: left;
            }
            .el-tabs__item.is-left:first-child {
                border-right: 1px solid $--border-color-light;
                border-top: none;
            }
            .el-tabs__item.is-left.is-active {
                border: 1px solid $--border-color-light;
                border-right-color: #fff;
                border-left: none;
                border-bottom: none;

                &:first-child {
                    border-top: none;
                }
                &:last-child {
                    border-bottom: none;
                }
            }

            .el-tabs__nav {
                border-radius: 4px 0 0 4px;
                border-bottom: 1px solid $--border-color-light;
                border-right: none;
            }

            .el-tabs__new-tab {
                float: none;
            }
        }

        &.el-tabs--border-card {
            .el-tabs__header.is-left {
                border-right: 1px solid #dfe4ed;
            }
            .el-tabs__item.is-left {
                border: 1px solid transparent;
                margin: -1px 0 -1px -1px;

                &.is-active {
                    border-color: transparent;
                    border-top-color: rgb(209, 219, 229);
                    border-bottom-color: rgb(209, 219, 229);
                }
            }
        }
    }
    @include m(right) {
        .el-tabs__header.is-right {
            float: right;
            margin-bottom: 0;
            margin-left: 10px;
        }

        .el-tabs__nav-wrap.is-right {
            margin-left: -1px;
            &::after {
                left: 0;
                right: auto;
            }
        }

        .el-tabs__active-bar.is-right {
            left: 0;
        }

        &.el-tabs--card {
            .el-tabs__active-bar.is-right {
                display: none;
            }
            .el-tabs__item.is-right {
                border-bottom: none;
                border-top: 1px solid $--border-color-light;
            }
            .el-tabs__item.is-right:first-child {
                border-left: 1px solid $--border-color-light;
                border-top: none;
            }
            .el-tabs__item.is-right.is-active {
                border: 1px solid $--border-color-light;
                border-left-color: #fff;
                border-right: none;
                border-bottom: none;

                &:first-child {
                    border-top: none;
                }
                &:last-child {
                    border-bottom: none;
                }
            }

            .el-tabs__nav {
                border-radius: 0 4px 4px 0;
                border-bottom: 1px solid $--border-color-light;
                border-left: none;
            }
        }
        &.el-tabs--border-card {
            .el-tabs__header.is-right {
                border-left: 1px solid #dfe4ed;
            }
            .el-tabs__item.is-right {
                border: 1px solid transparent;
                margin: -1px -1px -1px 0;

                &.is-active {
                    border-color: transparent;
                    border-top-color: rgb(209, 219, 229);
                    border-bottom-color: rgb(209, 219, 229);
                }
            }
        }
    }
}

.slideInRight-transition,
.slideInLeft-transition {
    display: inline-block;
}
.slideInRight-enter {
    animation: slideInRight-enter 0.3s;
}
.slideInRight-leave {
    position: absolute;
    left: 0;
    right: 0;
    animation: slideInRight-leave 0.3s;
}
.slideInLeft-enter {
    animation: slideInLeft-enter 0.3s;
}
.slideInLeft-leave {
    position: absolute;
    left: 0;
    right: 0;
    animation: slideInLeft-leave 0.3s;
}

@keyframes slideInRight-enter {
    0% {
        opacity: 0;
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }

    to {
        opacity: 1;
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
@keyframes slideInRight-leave {
    0% {
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }

    100% {
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
        opacity: 0;
    }
}
@keyframes slideInLeft-enter {
    0% {
        opacity: 0;
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }

    to {
        opacity: 1;
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
@keyframes slideInLeft-leave {
    0% {
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }

    100% {
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        opacity: 0;
    }
}








@include b(tree) {
    position: relative;
    cursor: default;
    color: $--tree-font-color;

    // delete author: tangdm [code]
    //background: $--color-white;

    @include e(empty-block) {
        position: relative;
        min-height: 60px;
        text-align: center;
        width: 100%;
        height: 100%;
    }

    @include e(empty-text) {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        color: $--color-text-secondary;
    }

    @include e(drop-indicator) {
        position: absolute;
        left: 0;
        right: 0;
        height: 1px;
        background-color: $--color-primary;
    }
}

@include b(tree-node) {
    white-space: nowrap;
    outline: none;
    &:focus {
        /* focus */
        > .el-tree-node__content {
            background-color: $--tree-node-hover-background-color;
        }
    }

    @include when(drop-inner) {
        > .el-tree-node__content .el-tree-node__label {
            background-color: $--color-primary;
            color: #fff;
        }
    }

    @include e(content) {
        display: flex;
        align-items: center;
        height: 26px;
        cursor: pointer;

        & > .el-tree-node__expand-icon {
            padding: 6px;
        }
        & > label.el-checkbox {
            margin-right: 8px;
        }
        &:hover {
            background-color: $--tree-node-hover-background-color;
        }

        // add author: tangdm
        label.el-checkbox.is-disabled + .el-tree-node__label {
            color: $--color-text-placeholder;
        }

        .el-tree.is-dragging & {
            cursor: move;

            & * {
                pointer-events: none;
            }
        }

        .el-tree.is-dragging.is-drop-not-allow & {
            cursor: not-allowed;
        }
    }

    @include e(expand-icon) {
        cursor: pointer;
        color: $--tree-expand-icon-color;
        font-size: 12px;

        transform: rotate(0deg);
        transition: transform 0.3s ease-in-out;

        &.expanded {
            transform: rotate(90deg);
        }

        &.is-leaf {
            color: transparent;
            cursor: default;
        }
    }

    @include e(label) {
        //font-size: $--font-size-base;

		// update author: tangdm [code] font-size: $--font-size-base;
		@include mq($large) {
			font-size: $dg--font-large;
		}
		@include mq($medium) {
			font-size: $dg--font-medium;
		}
		@include mq($small) {
			font-size: $dg--font-small;
		}
    }

    @include e(loading-icon) {
        margin-right: 8px;
        font-size: $--font-size-base;
        color: $--tree-expand-icon-color;
    }

    & > .el-tree-node__children {
        overflow: hidden;
        background-color: transparent;
    }

    &.is-expanded > .el-tree-node__children {
        display: block;
    }
}

.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
    background-color: mix($--color-white, $--color-primary, 92%);
}




@include b(alert) {
    width: 100%;
    padding: $--alert-padding;
    margin: 0;
    box-sizing: border-box;
    border-radius: $--alert-border-radius;
    position: relative;
    background-color: $--color-white;
    overflow: hidden;
    opacity: 1;
    display: flex;
    // update author:tangyx [code] align-items: center
    align-items: normal;
    transition: opacity 0.2s;

    @include when(light) {
        .el-alert__closebtn {
            //color: $--color-text-placeholder;
            //color: red;
            color: rgba($--message-close-icon-color, 0.45);
            &:hover {
                color: rgba($--message-close-hover-color, 0.65);
            }
            .font {
                color: red !important;
            }
        }
    }

    @include when(dark) {
        .el-alert__closebtn {
            color: $--color-white;
        }
        .el-alert__description {
            color: $--color-white;
        }
    }

    @include when(center) {
        justify-content: center;
    }

    @include m(success) {
        &.is-light {
            background-color: $--alert-success-color;

            color: $--color-success;

            .el-alert__description {
                color: $--color-success;
            }
        }

        &.is-dark {
            background-color: $--color-success;
            color: $--color-white;
        }
    }

    @include m(info) {
        &.is-light {
            background-color: $--alert-info-color;
            color: $--color-info;
        }

        &.is-dark {
            background-color: $--color-info;
            color: $--color-white;
        }

        .el-alert__description {
            color: $--color-info;
        }
    }

    @include m(warning) {
        &.is-light {
            background-color: $--alert-warning-color;
            color: $--color-warning;

            .el-alert__description {
                color: $--color-warning;
            }

        }

        &.is-dark {
            background-color: $--color-warning;
            color: $--color-white;
        }
    }

    @include m(error) {
        &.is-light {
            background-color: $--alert-danger-color;
            color: $--color-danger;

            .el-alert__description {
                color: $--color-danger;
            }
        }

        &.is-dark {
            background-color: $--color-danger;
            color: $--color-white;
        }
    }

    @include e(content) {
        display: table-cell;
        padding: 0 16px 0 8px;
    }

    @include e(icon) {
        //font-size: $--alert-icon-size;
        font-size: 16px;
        width: $--alert-icon-size;
        @include when(big) {
            // update author: tangdm [code] width: $--alert-icon-large-size; font-size: $--alert-icon-large-size;
            @include mq($large) {
                width: $dg--alert-icon-large-size;
                font-size: $dg--alert-icon-large-size;
            }
            @include mq($medium) {
                width: $dg--alert-icon-medium-size;
                font-size: $dg--alert-icon-medium-size;
            }
            @include mq($small) {
                width: $dg--alert-icon-small-size;
                font-size: $dg--alert-icon-small-size;
            }
        }
    }

    @include e(title) {
        // update author: tangdm [code] font-size: $--alert-title-font-size; descript: 媒体查询
        @include mq($large) {
            font-size: $dg--font-large;
        }
        @include mq($medium) {
            font-size: $dg--font-medium;
        }
        @include mq($small) {
            font-size: $dg--font-small;
        }

        // update author [code] line-height: 18px;
        line-height: 1.5;

        @include when(bold) {
            font-weight: bold;
        }
    }

    & .el-alert__description {
        // update author: tangdm [code] font-size: $--alert-description-font-size;
        @include mq($large) {
            font-size: $dg--font-large;
        }
        @include mq($medium) {
            font-size: $dg--font-medium;
        }
        @include mq($small) {
            font-size: $dg--font-small;
        }
        margin: 5px 0 0 0;

        // add author: tangdm
        word-break: break-all;
    }

    @include e(closebtn) {
        font-size: $--alert-close-font-size;
        opacity: 1;
        position: absolute;
        top: 12px;
        right: 15px;
        cursor: pointer;

        @include when(customed) {
            font-style: normal;
            color: $--color-text-regular;
            // add
            @include mq($large) {
                font-size: $dg--font-large;
                top: 7.5px;
            }
            @include mq($medium) {
                font-size: $dg--font-medium;
                top: 7.5px;
            }
            @include mq($small) {
                font-size: $dg--font-small;
                top: 8.5px;
            }
            //font-size: $--alert-close-customed-font-size;
            // update author:tangyx [code] top: 9px;
        }
    }
}

.el-alert-fade-enter,
.el-alert-fade-leave-active {
    opacity: 0;
}

//body {
//    background-color: $dg--color-assist-1;
//    background-color: $dg--color-assist-2;
//    background-color: $dg--color-assist-3;
//    background-color: $dg--color-assist-4;
//    background-color: $dg--color-assist-5;
//    background-color: $--color-primary;
//    background-color: $dg--color-assist-6;
//    background-color: $dg--color-assist-7;
//    background-color: $dg--color-assist-8;
//    background-color: $dg--color-assist-9;
//    background-color: $dg--color-assist-10;
//}





@include b(notification) {
    display: flex;
    width: $--notification-width;
    padding: $--notification-padding;
    border-radius: $--notification-radius;
    box-sizing: border-box;
    //border: 1px solid $--notification-border-color;
    position: fixed;
    background-color: $--color-white;
    box-shadow: $--notification-shadow;
    transition: opacity .3s, transform .3s, left .3s, right .3s, top 0.4s, bottom .3s;
    overflow: hidden;

    &.right {
        right: 16px;
    }

    &.left {
        left: 16px;
    }

    @include e(group) {
        // delete author:tangyx [code] margin-left: $--notification-group-margin-left;
        margin-right: $--notification-group-margin-right;

    }

    @include e(title) {
        font-weight: bold;
        //font-size: $--notification-title-font-size;
        color: $--notification-title-color;
        margin: 0;
        // create author:tangyx
        line-height: 1.5;

        // update author: tangdm [code] font-size: $--notification-title-font-size;
        @include mq($large) {
            font-size: $dg--title-font-large;
        }
        @include mq($medium) {
            font-size: $dg--title-font-medium;
        }
        @include mq($small) {
            font-size: $dg--title-font-small;
        }
    }

    @include e(content) {
        // update author:tangyx [code] line-height: 21px; font-size: $--notification-content-font-size;
        line-height: 1.5;
        // update author:tangyx [code] margin: 6px 0 0 0;
        margin: 8px 0 0 0;
        color: $--notification-content-color;
        text-align: justify;
        @include mq($large) {
            font-size: $dg--font-large;
        }
        @include mq($medium) {
            font-size: $dg--font-medium;
        }
        @include mq($small) {
            font-size: $dg--font-small;
        }

        p {
            margin: 0;
            // add author: tangdm
            color: $--notification-content-color;
        }
    }

    @include e(icon) {
        // update author: tangdm [code]
        //height: $--notification-icon-size;
        //width: $--notification-icon-size;
        //font-size: $--notification-icon-size;

        width: $--notification-icon-size;
        height: $--notification-icon-size;
        font-size: $--notification-icon-size;
        @include mq($small) {
            width: $--notification-icon-size - 2;
            height: $--notification-icon-size - 2;
            font-size: $--notification-icon-size - 2;
        }

        //create author:tangyx 
        margin-right: 16px;
    }

    @include e(closeBtn) {
        position: absolute;
        // update author:tangyx [code] top: 18px; right: 15px;
        top: 20px;
        right: 20px;
        cursor: pointer;
        color: $--notification-close-color;
        font-size: $--notification-close-font-size;
        &:hover {
            color: $--notification-close-hover-color;
        }
    }

    .el-icon-success {
        color: $--notification-success-icon-color;
    }

    .el-icon-error {
        color: $--notification-danger-icon-color;
    }

    .el-icon-info {
        color: $--notification-info-icon-color;
    }

    .el-icon-warning {
        color: $--notification-warning-icon-color;
    }
}

.el-notification-fade-enter {
    &.right {
        right: 0;
        transform: translateX(100%);
    }

    &.left {
        left: 0;
        transform: translateX(-100%);
    }
}

.el-notification-fade-leave-active {
    opacity: 0;
}






@include b(slider) {

  @include utils-clearfix;

  @include e(runway) {
    width: 100%;
    height: $--slider-height;
    margin: $--slider-margin;
    background-color: $--slider-runway-background-color;
    border-radius: $--slider-border-radius;
    position: relative;
    cursor: pointer;
    vertical-align: middle;

    &.show-input {
      margin-right: 160px;
      width: auto;
    }

    &.disabled {
      cursor: default;

      .el-slider__bar {
        background-color: $--slider-disable-color;
      }

      .el-slider__button {
        border-color: $--slider-disable-color;
      }

      .el-slider__button-wrapper {
        &:hover,
        &.hover {
          cursor: not-allowed;
        }

        &.dragging {
          cursor: not-allowed;
        }
      }

      .el-slider__button {
        &:hover,
        &.hover,
        &.dragging {
          transform: scale(1);
        }

        &:hover,
        &.hover {
          cursor: not-allowed;
        }

        &.dragging {
          cursor: not-allowed;
        }
      }
    }
  }

  @include e(input) {
    float: right;
    margin-top: 3px;
    width: 130px;

    &.el-input-number--mini {
      margin-top: 5px;
    }

    &.el-input-number--medium {
      margin-top: 0;
    }

    &.el-input-number--large {
      margin-top: -2px;
    }
  }

  @include e(bar) {
    height: $--slider-height;
    background-color: $--slider-main-background-color;
    border-top-left-radius: $--slider-border-radius;
    border-bottom-left-radius: $--slider-border-radius;
    position: absolute;
  }

  @include e(button-wrapper) {
    height: $--slider-button-wrapper-size;
    width: $--slider-button-wrapper-size;
    position: absolute;
    z-index: 1001;
    top: $--slider-button-wrapper-offset;
    transform: translateX(-50%);
    background-color: transparent;
    text-align: center;
    user-select: none;
    line-height: normal;
    @include utils-vertical-center;

    .el-tooltip {
      vertical-align: middle;
      display: inline-block;
    }

    &:hover,
    &.hover {
      cursor: grab;
    }

    &.dragging {
      cursor: grabbing;
    }
  }

  @include e(button) {
    width: $--slider-button-size;
    height: $--slider-button-size;
    border: solid 2px $--slider-main-background-color;
    background-color: $--color-white;
    border-radius: 50%;
    transition: .2s;
    user-select: none;

    &:hover,
    &.hover,
    &.dragging {
      transform: scale(1.2);
    }

    &:hover,
    &.hover {
      cursor: grab;
    }

    &.dragging {
      cursor: grabbing;
    }
  }

  @include e(stop) {
    position: absolute;
    height: $--slider-height;
    width: $--slider-height;
    border-radius: $--border-radius-circle;
    background-color: $--slider-stop-background-color;
    transform: translateX(-50%);
  }

  @include e(marks) {
    top: 0;
    left: 12px;
    width: 18px;
    height: 100%;

    @include e(marks-text) {
      position: absolute;
      transform: translateX(-50%);
      font-size: 14px;
      color: $--color-info;
      margin-top: 15px;
    }
  }

  @include when(vertical) {
    position: relative;
    .el-slider__runway {
      width: $--slider-height;
      height: 100%;
      margin: 0 16px;
    }
    .el-slider__bar {
      width: $--slider-height;
      height: auto;
      border-radius: 0 0 3px 3px;
    }
    .el-slider__button-wrapper {
      top: auto;
      left: $--slider-button-wrapper-offset;
      transform: translateY(50%);
    }
    .el-slider__stop {
      transform: translateY(50%);
    }
    &.el-slider--with-input {
      padding-bottom: #{$--input-medium-height + 22px};
      .el-slider__input {
        overflow: visible;
        float: none;
        position: absolute;
        bottom: 22px;
        width: 36px;
        margin-top: 15px;
        .el-input__inner {
          text-align: center;
          padding-left: 5px;
          padding-right: 5px;
        }
        .el-input-number__decrease,
        .el-input-number__increase
        {
          top: $--input-small-height;
          margin-top: -1px;
          border: $--input-border;
          line-height: 20px;
          box-sizing: border-box;
          transition: $--border-transition-base;
        }
        .el-input-number__decrease {
          width: 18px;
          right: 18px;
          border-bottom-left-radius: $--input-border-radius;
        }
        .el-input-number__increase {
          width: 19px;
          border-bottom-right-radius: $--input-border-radius;
          & ~ .el-input .el-input__inner {
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
          }
        }
        &:hover {
          .el-input-number__decrease,
          .el-input-number__increase
          {
            border-color: $--input-hover-border;
          }
        }
        &:active {
          .el-input-number__decrease,
          .el-input-number__increase
          {
            border-color: $--input-focus-border;
          }
        }
      }
    }

    @include e(marks-text) {
      margin-top: 0;
      left: 15px;
      transform: translateY(50%);
    }
  }
}




@include b(loading-parent) {
  @include m(relative) {
    position: relative !important;
  }

  @include m(hidden) {
    overflow: hidden !important;
  }
}

@include b(loading-mask) {
  position: absolute;
  z-index: 2000;
  background-color: rgba(255, 255, 255, .9);
  margin: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition: opacity 0.3s;

  @include when(fullscreen) {
    position: fixed;

    .el-loading-spinner {
      margin-top: #{- $--loading-fullscreen-spinner-size / 2};

      .circular {
        height: $--loading-fullscreen-spinner-size;
        width: $--loading-fullscreen-spinner-size;
      }
    }
  }
}

@include b(loading-spinner) {
  top: 50%;
  margin-top: #{- $--loading-spinner-size / 2};
  width: 100%;
  text-align: center;
  position: absolute;

  .el-loading-text {
    color: $--color-primary;
    margin: 3px 0;
    font-size: 14px;
  }

  .circular {
    height: $--loading-spinner-size;
    width: $--loading-spinner-size;
    animation: loading-rotate 2s linear infinite;
  }

  .path {
    animation: loading-dash 1.5s ease-in-out infinite;
    stroke-dasharray: 90, 150;
    stroke-dashoffset: 0;
    stroke-width: 2;
    stroke: $--color-primary;
    stroke-linecap: round;
  }

  i {
    color: $--color-primary;
  }
}

.el-loading-fade-enter,
.el-loading-fade-leave-active {
  opacity: 0;
}

@keyframes loading-rotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes loading-dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -40px;
  }
  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -120px;
  }
}





@include b(row) {
  position: relative;
  box-sizing: border-box;
  @include utils-clearfix;

  @include m(flex) {
    display: flex;
    &:before,
    &:after {
      display: none;
    }

    @include when(justify-center) {
      justify-content: center;
    }
    @include when(justify-end) {
      justify-content: flex-end;
    }
    @include when(justify-space-between) {
      justify-content: space-between;
    }
    @include when(justify-space-around) {
      justify-content: space-around;
    }

    @include when(align-middle) {
      align-items: center;
    }
    @include when(align-bottom) {
      align-items: flex-end;
    }
  }

}





[class*="el-col-"] {
  float: left;
  box-sizing: border-box;
}

.el-col-0 {
  display: none;
}

@for $i from 0 through 24 {
  .el-col-#{$i} {
    width: (1 / 24 * $i * 100) * 1%;
  }

  .el-col-offset-#{$i} {
    margin-left: (1 / 24 * $i * 100) * 1%;
  }

  .el-col-pull-#{$i} {
    position: relative;
    right: (1 / 24 * $i * 100) * 1%;
  }

  .el-col-push-#{$i} {
    position: relative;
    left: (1 / 24 * $i * 100) * 1%;
  }
}

@include res(xs) {
  .el-col-xs-0 {
    display: none;
  }
  @for $i from 0 through 24 {
    .el-col-xs-#{$i} {
      width: (1 / 24 * $i * 100) * 1%;
    }

    .el-col-xs-offset-#{$i} {
      margin-left: (1 / 24 * $i * 100) * 1%;
    }

    .el-col-xs-pull-#{$i} {
      position: relative;
      right: (1 / 24 * $i * 100) * 1%;
    }

    .el-col-xs-push-#{$i} {
      position: relative;
      left: (1 / 24 * $i * 100) * 1%;
    }
  }
}

@include res(sm) {
  .el-col-sm-0 {
    display: none;
  }
  @for $i from 0 through 24 {
    .el-col-sm-#{$i} {
      width: (1 / 24 * $i * 100) * 1%;
    }

    .el-col-sm-offset-#{$i} {
      margin-left: (1 / 24 * $i * 100) * 1%;
    }

    .el-col-sm-pull-#{$i} {
      position: relative;
      right: (1 / 24 * $i * 100) * 1%;
    }

    .el-col-sm-push-#{$i} {
      position: relative;
      left: (1 / 24 * $i * 100) * 1%;
    }
  }
}

@include res(md) {
  .el-col-md-0 {
    display: none;
  }
  @for $i from 0 through 24 {
    .el-col-md-#{$i} {
      width: (1 / 24 * $i * 100) * 1%;
    }

    .el-col-md-offset-#{$i} {
      margin-left: (1 / 24 * $i * 100) * 1%;
    }

    .el-col-md-pull-#{$i} {
      position: relative;
      right: (1 / 24 * $i * 100) * 1%;
    }

    .el-col-md-push-#{$i} {
      position: relative;
      left: (1 / 24 * $i * 100) * 1%;
    }
  }
}

@include res(lg) {
  .el-col-lg-0 {
    display: none;
  }
  @for $i from 0 through 24 {
    .el-col-lg-#{$i} {
      width: (1 / 24 * $i * 100) * 1%;
    }

    .el-col-lg-offset-#{$i} {
      margin-left: (1 / 24 * $i * 100) * 1%;
    }

    .el-col-lg-pull-#{$i} {
      position: relative;
      right: (1 / 24 * $i * 100) * 1%;
    }

    .el-col-lg-push-#{$i} {
      position: relative;
      left: (1 / 24 * $i * 100) * 1%;
    }
  }
}

@include res(xl) {
  .el-col-xl-0 {
    display: none;
  }
  @for $i from 0 through 24 {
    .el-col-xl-#{$i} {
      width: (1 / 24 * $i * 100) * 1%;
    }

    .el-col-xl-offset-#{$i} {
      margin-left: (1 / 24 * $i * 100) * 1%;
    }

    .el-col-xl-pull-#{$i} {
      position: relative;
      right: (1 / 24 * $i * 100) * 1%;
    }

    .el-col-xl-push-#{$i} {
      position: relative;
      left: (1 / 24 * $i * 100) * 1%;
    }
  }
}





@include b(progress) {
  position: relative;
  line-height: 1;

  @include e(text) {
    font-size:14px;
    color: $--color-text-regular;
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
    line-height: 1;

    i {
      vertical-align: middle;
      display: block;
    }
  }

  @include m((circle,dashboard)) {
    display: inline-block;

    .el-progress__text {
      position: absolute;
      top: 50%;
      left: 0;
      width: 100%;
      text-align: center;
      margin: 0;
      transform: translate(0, -50%);

      i {
        vertical-align: middle;
        display: inline-block;
      }
    }
  }


  @include m(without-text) {
    .el-progress__text {
      display: none;
    }

    .el-progress-bar {
      padding-right: 0;
      margin-right: 0;
      display: block;
    }
  }

  @include m(text-inside) {
    .el-progress-bar {
      padding-right: 0;
      margin-right: 0;
    }
  }

  @include when(success) {
    .el-progress-bar__inner {
      background-color: $--color-success;
    }

    .el-progress__text {
      color: $--color-success;
    }
  }

  @include when(warning) {
    .el-progress-bar__inner {
      background-color: $--color-warning;
    }

    .el-progress__text {
      color: $--color-warning;
    }
  }

  @include when(exception) {
    .el-progress-bar__inner {
      background-color: $--color-danger;
    }

    .el-progress__text {
      color: $--color-danger;
    }
  }
}

@include b(progress-bar) {
  padding-right: 50px;
  display: inline-block;
  vertical-align: middle;
  width: 100%;
  margin-right: -55px;
  box-sizing: border-box;

  @include e(outer) {
    height: 6px;
    border-radius: 100px;
    background-color: $--border-color-lighter;
    overflow: hidden;
    position: relative;
    vertical-align: middle;
  }
  @include e(inner) {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background-color: $--color-primary;
    text-align: right;
    border-radius: 100px;
    line-height: 1;
    white-space: nowrap;
    transition: width 0.6s ease;

    @include utils-vertical-center;
  }

  @include e(innerText) {
    display: inline-block;
    vertical-align: middle;
    color: $--color-white;
    font-size: 12px;
    margin: 0 5px;
  }
}

@keyframes progress {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 32px 0;
  }
}



@include b(upload) {
    display: inline-block;
    text-align: center;
    cursor: pointer;
    outline: none;
    @include e(input) {
        display: none;
    }

    @include e(tip) {
        font-size: 12px;
        color: $--color-text-regular;

        // update author: tangdm [code] margin-top: 7px;
        margin-top: 8px;
        line-height: 1;
    }

    iframe {
        position: absolute;
        z-index: -1;
        top: 0;
        left: 0;
        opacity: 0;
        filter: alpha(opacity=0);
    }

    /* 照片墙模式 */
    @include m(picture-card) {
        background-color: $--table-header-background-color;
        border: 1px dashed $--border-color-base;

        // update author: tangdm [code] border-radius: 6px;
        border-radius: 2px;

        box-sizing: border-box;
        width: 148px;
        height: 148px;
        cursor: pointer;
        line-height: 146px;
        vertical-align: top;

        i {
            font-size: 28px;
            color: #8c939d;
        }

        &:hover {
            border-color: $--color-primary;
            color: $--color-primary;
        }
    }
    &:focus {
        border-color: $--color-primary;
        color: $--color-primary;

        .el-upload-dragger {
            border-color: $--color-primary;
        }
    }
}

@include b(upload-dragger) {
    background-color: #fff;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    box-sizing: border-box;
    width: 360px;
    height: 180px;
    text-align: center;
    cursor: pointer;
    position: relative;
    overflow: hidden;

    .el-icon-upload {
        font-size: 67px;
        color: $--color-text-placeholder;
        margin: 40px 0 16px;
        line-height: 50px;
    }

    + .el-upload__tip {
        text-align: center;
    }

    ~ .el-upload__files {
        border-top: $--border-base;
        margin-top: 7px;
        padding-top: 5px;
    }

    .el-upload__text {
        color: $--color-text-regular;
        font-size: 24px;
        text-align: center;
        //@include mq($large) {
        //    font-size: $dg--font-large;
        //}
        //@include mq($medium) {
        //    font-size: $dg--font-medium;
        //}
        //@include mq($small) {
        //    font-size: $dg--font-small;
        //}
        em {
            color: $--color-primary;
            font-style: normal;
        }
    }

    &:hover {
        border-color: $--color-primary;
    }

    @include when(dragover) {
        background-color: rgba(32, 159, 255, 0.06);
        border: 2px dashed $--color-primary;
    }
}

@include b(upload-list) {
    margin: 0;
    padding: 0;
    list-style: none;

    @include e(item) {
        transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
        //font-size: 14px;
        color: $--color-text-regular;
        line-height: 1.8;
        margin-top: 5px;
        position: relative;
        box-sizing: border-box;
        border-radius: 4px;
        width: 100%;
        //add
        @include mq($large) {
            font-size: $dg--font-large;
        }
        @include mq($medium) {
            font-size: $dg--font-medium;
        }
        @include mq($small) {
            font-size: $dg--font-small;
        }
        .el-progress {
            position: absolute;
            top: 20px;
            width: 100%;
        }

        .el-progress__text {
            position: absolute;
            right: 0;
            top: -13px;
        }

        .el-progress-bar {
            margin-right: 0;
            padding-right: 0;
        }

        &:first-child {
            margin-top: 10px;
        }

        & .el-icon-upload-success {
            color: $--color-success;
        }

        .el-icon-close {
            display: none;
            position: absolute;
            top: 5px;
			// update author: tangdm [code] right: 5px;
            right: 12px;

            cursor: pointer;
            opacity: 0.75;
            color: $--color-text-regular;
            //transform: scale(.7);

            &:hover {
                opacity: 1;
            }
        }

        & .el-icon-close-tip {
            display: none;
            position: absolute;
            top: 5px;
            right: 5px;
            font-size: 12px;
            cursor: pointer;
            opacity: 1;
            color: $--color-primary;
        }

        &:hover {
            background-color: $--background-color-base;

            .el-icon-close {
                display: inline-block;
            }

            .el-progress__text {
                display: none;
            }
        }

        @include when(success) {
            .el-upload-list__item-status-label {
                display: block;
            }

            .el-upload-list__item-name:hover,
            .el-upload-list__item-name:focus {
                color: $--link-hover-color;
                cursor: pointer;
            }

            &:focus:not(:hover) {
                /* 键盘focus */
                .el-icon-close-tip {
                    display: inline-block;
                }
            }

            &:not(.focusing):focus,
            &:active {
                /* click时 */
                outline-width: 0;
                .el-icon-close-tip {
                    display: none;
                }
            }

            &:hover,
            &:focus {
                .el-upload-list__item-status-label {
                    display: none;
                }
            }
        }
    }

    @include when(disabled) {
        .el-upload-list__item:hover .el-upload-list__item-status-label {
            display: block;
        }
    }

    @include e(item-name) {
        color: $--color-text-regular;
        display: block;
        margin-right: 40px;
        overflow: hidden;
		// update author: tangdm [code] padding-left: 4px;
        padding-left: 8px;
        text-overflow: ellipsis;
        transition: color 0.3s;
        white-space: nowrap;

        [class^='el-icon'] {
            height: 100%;
            margin-right: 7px;

            // delete author: tangdm
            //color: $--color-text-secondary;
            line-height: inherit;
        }
    }

    @include e(item-status-label) {
        position: absolute;
		// update author: tangdm [code] right: 5px;
		right: 12px;

		top: 0;
        line-height: inherit;
        display: none;
    }

    @include e(item-delete) {
        position: absolute;
        right: 10px;
        top: 0;
        font-size: 12px;
        color: $--color-text-regular;
        display: none;

        &:hover {
            color: $--color-primary;
        }
    }

    @include m(picture-card) {
        margin: 0;
        display: inline;
        vertical-align: top;

        .el-upload-list__item {
            overflow: hidden;
            // delete author: tangdm [code]
            //background-color: #fff;

            // update author: tangdm [code] border: 1px solid #c0ccda;
            border: 1px solid $--border-color-base;
            border-radius: 6px;
            box-sizing: border-box;
            width: 148px;
            height: 148px;
            margin: 0 8px 8px 0;
            display: inline-block;

            .el-icon-check,
            .el-icon-circle-check {
                color: $--color-white;
            }

            .el-icon-close {
                display: none;
            }
            &:hover {
                .el-upload-list__item-status-label {
                    display: none;
                }

                .el-progress__text {
                    display: block;
                }
            }
        }

        .el-upload-list__item-name {
            display: none;
        }

        .el-upload-list__item-thumbnail {
            width: 100%;
            height: 100%;
        }

        .el-upload-list__item-status-label {
            position: absolute;
            right: -15px;
            top: -6px;
            width: 40px;
            height: 24px;
            background: #13ce66;
            text-align: center;
            transform: rotate(45deg);
            box-shadow: 0 0 1pc 1px rgba(0, 0, 0, 0.2);

            i {
                font-size: 12px;
                margin-top: 11px;
                transform: rotate(-45deg);
            }
        }

        .el-upload-list__item-actions {
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            cursor: default;
            text-align: center;
            color: #fff;
            opacity: 0;
            font-size: 20px;
            background-color: rgba(0, 0, 0, 0.5);
            transition: opacity 0.3s;
            &::after {
                display: inline-block;
                content: '';
                height: 100%;
                vertical-align: middle;
            }

            span {
                display: none;
                cursor: pointer;
            }

            span + span {
                margin-left: 15px;
            }

            .el-upload-list__item-delete {
                position: static;
                font-size: inherit;
                color: inherit;
            }

            &:hover {
                opacity: 1;
                span {
                    display: inline-block;
                }
            }
        }

        .el-progress {
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            bottom: auto;
            width: 126px;

            .el-progress__text {
                top: 50%;
            }
        }
    }

    @include m(picture) {
        .el-upload-list__item {
            overflow: hidden;
            z-index: 0;
            background-color: #fff;
            border: 1px solid #c0ccda;
            border-radius: 6px;
            box-sizing: border-box;
            margin-top: 10px;
            padding: 10px 10px 10px 90px;
            height: 92px;

            .el-icon-check,
            .el-icon-circle-check {
                color: $--color-white;
            }

            &:hover {
                .el-upload-list__item-status-label {
                    background: transparent;
                    box-shadow: none;
                    top: -2px;
                    right: -12px;
                }

                .el-progress__text {
                    display: block;
                }
            }

            &.is-success {
                .el-upload-list__item-name {
                    line-height: 70px;
                    margin-top: 0;
                    i {
                        display: none;
                    }
                }
            }
        }

        .el-upload-list__item-thumbnail {
            vertical-align: middle;
            display: inline-block;
            width: 70px;
            height: 70px;
            float: left;
            position: relative;
            z-index: 1;
            margin-left: -80px;
            background-color: $--color-white;
        }

        .el-upload-list__item-name {
            display: block;
            margin-top: 20px;

            i {
                font-size: 70px;
                line-height: 1;
                position: absolute;
                left: 9px;
                top: 10px;
            }
        }

        .el-upload-list__item-status-label {
            position: absolute;
            right: -17px;
            top: -7px;
            width: 46px;
            height: 26px;
            background: #13ce66;
            text-align: center;
            transform: rotate(45deg);
            box-shadow: 0 1px 1px #ccc;

            i {
                font-size: 12px;
                margin-top: 12px;
                transform: rotate(-45deg);
            }
        }

        .el-progress {
            position: relative;
            top: -7px;
        }
    }
}

@include b(upload-cover) {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 10;
    cursor: default;
    @include utils-vertical-center;

    img {
        display: block;
        width: 100%;
        height: 100%;
    }

    @include e(label) {
        position: absolute;
        right: -15px;
        top: -6px;
        width: 40px;
        height: 24px;
        background: #13ce66;
        text-align: center;
        transform: rotate(45deg);
        box-shadow: 0 0 1pc 1px rgba(0, 0, 0, 0.2);

        i {
            font-size: 12px;
            margin-top: 11px;
            transform: rotate(-45deg);
            color: #fff;
        }
    }

    @include e(progress) {
        display: inline-block;
        vertical-align: middle;
        position: static;
        width: 243px;

        + .el-upload__inner {
            opacity: 0;
        }
    }

    @include e(content) {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    @include e(interact) {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(#000, 0.72);
        text-align: center;

        .btn {
            display: inline-block;
            color: $--color-white;
            font-size: 14px;
            cursor: pointer;
            vertical-align: middle;
            transition: $--md-fade-transition;
            margin-top: 60px;

            i {
                margin-top: 0;
            }

            span {
                opacity: 0;
                transition: opacity 0.15s linear;
            }

            &:not(:first-child) {
                margin-left: 35px;
            }

            &:hover {
                transform: translateY(-13px);

                span {
                    opacity: 1;
                }
            }

            i {
                color: $--color-white;
                display: block;
                font-size: 24px;
                line-height: inherit;
                margin: 0 auto 5px;
            }
        }
    }

    @include e(title) {
        position: absolute;
        bottom: 0;
        left: 0;
        background-color: $--color-white;
        height: 36px;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-weight: normal;
        text-align: left;
        padding: 0 10px;
        margin: 0;
        line-height: 36px;
        font-size: 14px;
        color: $--color-text-primary;
    }

    + .el-upload__inner {
        opacity: 0;
        position: relative;
        z-index: 1;
    }
}




@include b(time-spinner) {
  width: 100%;
  white-space: nowrap;
}

@include b(spinner) {
  display: inline-block;
  vertical-align: middle;
}
@include b(spinner-inner) {
  animation: rotate 2s linear infinite;
  width: 50px;
  height: 50px;

  & .path {
    stroke: #ececec;
    stroke-linecap: round;
    animation: dash 1.5s ease-in-out infinite;
  }

}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes dash {
  0% {
    stroke-dasharray: 1, 150;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -124;
  }
}





@include b(message) {
    min-width: $--message-min-width;
    box-sizing: border-box;
    // delete author:tangyx [code] border-radius: $--border-radius-base;
    border-radius: $--border-radius-small;
    // delete author:tangyx [code] border-width: $--border-width-base;
    // delete author:tangyx [code] border-style: $--border-style-base;
    // delete author:tangyx [code] border-color: $--border-color-lighter;
    // create author:tangyx 
    box-shadow: $dg--message-box-shadow;
    position: fixed;
    left: 50%;
    top: 20px;
    transform: translateX(-50%);
    background-color: $--message-background-color;
    transition: opacity 0.3s, transform .4s, top 0.4s;
    overflow: hidden;
    padding: $--message-padding;
    display: flex;
    align-items: center;

    // add author: tangdm
    font-weight: bold;
    border: 1px solid transparent;

    @include when(center) {
        justify-content: center;
    }

    @include when(closable) {
        .el-message__content {
            padding-right: 16px;
        }
    }

    p {
        margin: 0;

        // add author: tangdm
        @include mq($large) {
            font-size: $dg--font-large;
        }
        @include mq($medium) {
            font-size: $dg--font-medium;
        }
        @include mq($small) {
            font-size: $dg--font-small;
        }
        color: $--color-text-primary;
    }

    // create start author:tangyx 
    .el-message__content {
        color: $dg--message-font-color;
        
    }

    // create end

    /* delete author:tangyx 
    @include m(info) {
        .el-message__content {
            color: $--message-info-font-color;
        }
    }
    */

    @include m(success) {
        // update author:tangyx [code] background-color: $--color-success-lighter; 
        background-color: $--message-background-color;
        // delete author:tangyx [code] border-color: $--color-success-light;
        /* delete author:tangyx 
        .el-message__content {
            color: $--message-success-font-color;
        }
        */
    }

    @include m(warning) {
        // update author:tangyx [code] background-color: $--color-warning-lighter;; 
        background-color: $--message-background-color;
        // delete author:tangyx [code] border-color: $--color-warning-light;
        /* delete author:tangyx 
        .el-message__content {
            color: $--message-warning-font-color;
        }
        */
    }

    @include m(error) {
        // update author:tangyx [code]  background-color: $--color-danger-lighter; 
        background-color: $--message-background-color;

        // delete author:tangyx [code] border-color: $--color-danger-light;
        /* delete author:tangyx 
        .el-message__content {
            color: $--message-danger-font-color;
        }
        */
    }

    @include e(icon) {
        // update author:tangyx [code] margin-right: 10px;
        margin-right: 8px;
    }

    @include e(content) {
        padding: 0;

        // update author: tangdm [code] font-size: 14px; line-height: 1;
        @include mq($large) {
            font-size: $dg--font-large;
        }
        @include mq($medium) {
            font-size: $dg--font-medium;
        }
        @include mq($small) {
            font-size: $dg--font-small;
        }
        line-height: 1.5;

        &:focus {
            outline-width: 0;
        }
    }

    @include e(closeBtn) {
        position: absolute;
        top: 50%;
        right: 15px;
        transform: translateY(-50%);
        cursor: pointer;
        color: $--message-close-icon-color;

        // update author: tangdm [code] font-size: $--message-close-size;
        //font-size: $--message-close-size;


        &:focus {
            outline-width: 0;
        }

        &:hover {
            color: $--message-close-hover-color;
        }
    }
    & .el-message__icon{
        @include mq($large) {
            font-size: $dg--font-large;
        }
        @include mq($medium) {
            font-size: $dg--font-medium;
        }
        @include mq($small) {
            font-size: $dg--font-small;
        }
    }
    & .el-icon-success {
        color: $--message-success-font-color;
    }

    & .el-icon-error {
        color: $--message-danger-font-color;
    }

    & .el-icon-info {
        color: $--message-info-font-color;
    }

    & .el-icon-warning {
        color: $--message-warning-font-color;
    }
    strong{
        font-weight: 500;
    }
}

.el-message-fade-enter,
.el-message-fade-leave-active {
    opacity: 0;
    transform: translate(-50%, -100%);
}



@include b(badge) {
    position: relative;
    vertical-align: middle;
    display: inline-block;

    // add author: tangdm
    @include mq($large) {
        font-size: $dg--font-large;
    }
    @include mq($medium) {
        font-size: $dg--font-medium;
    }
    @include mq($small) {
        font-size: $dg--font-small;
    }

    @include e(content) {
        background-color: $--badge-background-color;
        border-radius: $--badge-radius;
        color: $--color-white;
        display: inline-block;
        font-size: $--badge-font-size;
        height: $--badge-size;
        line-height: $--badge-size;
        padding: 0 $--badge-padding;
        text-align: center;
        white-space: nowrap;
        border: 1px solid $--color-white;

        @include when(fixed) {
            position: absolute;
            top: 0;
            right: #{1 + $--badge-size / 2};
            transform: translateY(-50%) translateX(100%);

            @include when(dot) {
                right: 5px;
            }
        }

        @include when(dot) {
            height: 8px;
            width: 8px;
            padding: 0;
            right: 0;
            border-radius: 50%;
        }

        @each $type in (primary, success, warning, info, danger) {
            @include m($type) {
                @if $type == primary {
                    background-color: $--color-primary;
                } @else if $type == success {
                    background-color: $--color-success;
                } @else if $type == warning {
                    background-color: $--color-warning;
                } @else if $type == info {
                    background-color: $--color-info;
                } @else {
                    background-color: $--color-danger;
                }
            }
        }
    }
}





@include b(card) {
    border-radius: $--card-border-radius;
    overflow: hidden;
    color: $--color-text-primary;
    transition: 0.3s;

    // update author: tangdm [code] border: 1px solid $--card-border-color;
    &.is-border {
        border: 1px solid $--card-border-color;
    }

    // update author: tangdm [code] background-color: $--color-white;
    background-color: $dg--card-background;

    @include when(always-shadow) {
        // update author:tangyx [code] box-shadow: $--box-shadow-light;
        box-shadow: $dg--box-shadow-light;
        // create author:tangyx 
        border-width: 0;
    }

    @include when(hover-shadow) {
        &:hover,
        &:focus {
            // update author:tangyx [code] box-shadow: $--box-shadow-light;
            box-shadow: $dg--box-shadow-light;
        }
    }

    @include e(header) {
        // delete author: tangdm
        //border-bottom: 1px solid $--card-border-color;
        //padding: #{$--card-padding - 2 $--card-padding};
        //box-sizing: border-box;

        // add author: tangdm
        color: $--color-text-primary;
        font-weight: bold;
        box-sizing: border-box;
        padding: 2rem 2rem 0;
        @include mq($large) {
            font-size: $dg--title-font-large;
            line-height: $dg--title-font-large;
        }
        @include mq($medium) {
            font-size: $dg--title-font-medium;
            line-height: $dg--title-font-medium;
        }
        @include mq($small) {
            font-size: $dg--title-font-small;
            line-height: $dg--title-font-small;
        }

        &::after {
            content: '';
            clear: both;
        }

        & .dg-card__more {
            font-size: 14px;
            float: right;
            margin-top: -3px;

        }
    }

    // add author: tangdm
    &.is-base {
        @include e(header) {
            line-height: 1.5;
            height: 3.5rem;
            border-bottom: 1px solid $--border-color-extra-light;
            padding: 1rem 2rem;
        }
    }

    @include e(body) {
        //updata author: tangdm [code] padding: $--card-padding;
        @include mq($large) {
            padding: #{$dg--rem-large * 1.5 $dg--rem-large * 2};
        }
        @include mq($medium) {
            padding: #{$dg--rem-medium * 1.5 $dg--rem-medium * 2};
        }
        @include mq($small) {
            padding: #{$dg--rem-small * 1.5 $dg--rem-small * 2};
        }

        // add author: tangdm
        @include font;
        > .el-tabs {
            margin-top: -15px;
        }
    }
}



@include b(rate) {
  height: $--rate-height;
  line-height: 1;

  &:focus, &:active {
    outline-width: 0;
  }

  @include e(item) {
    display: inline-block;
    position: relative;
    font-size: 0;
    vertical-align: middle;
  }

  @include e(icon) {
    position: relative;
    display: inline-block;
    font-size: $--rate-icon-size;
    margin-right: $--rate-icon-margin;
    color: $--rate-icon-color;
    transition: .3s;
    &.hover {
      transform: scale(1.15);
    }

    .path2 {
      position: absolute;
      left: 0;
      top: 0;
    }
  }

  @include e(decimal) {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    overflow: hidden;
  }

  @include e(text) {
    font-size: $--rate-font-size;
    vertical-align: middle;
  }
}



@include b(steps) {
  display: flex;

  @include m(simple) {
    padding: 13px 8%;
    border-radius: 4px;
    background: $--background-color-base;
  }

  @include m(horizontal) {
    white-space: nowrap;
  }

  @include m(vertical) {
    height: 100%;
    flex-flow: column;
  }
}




@include b(step) {
    position: relative;
    flex-shrink: 1;

    @include pseudo(last-of-type) {
        @include e(line) {
            display: none;
        }

        // 只有未设置 space 的情况下才自适应宽度
        @include when(flex) {
            flex-basis: auto !important;
            flex-shrink: 0;
            flex-grow: 0;
        }

        @include e((main, description)) {
            padding-right: 0;
        }
    }

    @include e(head) {
        position: relative;
        width: 100%;

        @include when(process) {
			// delete author: tangdm
			//color: $--color-text-primary;

			// update author: tangdm [code] border-color: $--color-text-primary;
			border-color: $--color-primary;

			// add author: tangdm
			.el-step__icon {
				background-color: $--color-primary;
				color: $--color-white;
			}
        }

        @include when(wait) {
            color: $--color-text-placeholder;
            border-color: $--color-text-placeholder;
        }

        @include when(success) {
			// update author: tangdm [code] color: $--color-success; border-color: $--color-success;
            color: $--color-primary;
            border-color: $--color-primary;
        }

        @include when(error) {
            color: $--color-danger;
            border-color: $--color-danger;
        }

        @include when(finish) {
            color: $--color-primary;
            border-color: $--color-primary;
        }
    }

    @include e(icon) {
        position: relative;
        z-index: 1;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        width: 24px;
        height: 24px;
        font-size: 14px;
        box-sizing: border-box;
        background: $--color-white;
        transition: 0.15s ease-out;

        @include when(text) {
            border-radius: 50%;
			// update author: tangdm [code] border: 2px solid; border-color: inherit;
			border: 1px solid;
			border-color: inherit;
        }

        @include when(icon) {
            width: 40px;
        }
    }

    @include e(icon-inner) {
        display: inline-block;
        user-select: none;
        text-align: center;
        font-weight: bold;
        line-height: 1;
        color: inherit;

        &[class*='el-icon']:not(.is-status) {
            font-size: 25px;
            font-weight: normal;
        }

        // 组件自身表示状态的图标
        @include when(status) {
            transform: translateY(1px);
        }
    }

    @include e(line) {
        position: absolute;
        border-color: inherit;
        background-color: $--color-text-placeholder;
    }

    @include e(line-inner) {
        display: block;
        border-width: 1px;
        border-style: solid;
        border-color: inherit;
        transition: 0.15s ease-out;
        box-sizing: border-box;
        width: 0;
        height: 0;
    }

    @include e(main) {
        white-space: normal;
        text-align: left;
    }

    @include e(title) {
		// update author: tangdm [code] font-size: 16px; line-height: 38px;
        font-size: 14px;
        line-height: 1.5;

		// add author: tangdm
		padding-top: 4px;
		padding-bottom: 4px;

        @include when(process) {
            font-weight: bold;
            color: $--color-text-primary;
        }

        @include when(wait) {
			// update author: tangdm [code] color: $--color-text-placeholder
            color: $--color-text-regular;
        }

        @include when(success) {
			// update author: tangdm [code] color: $--color-success;
            color: $--color-text-secondary;
        }

        @include when(error) {
            color: $--color-danger;
        }

        @include when(finish) {
            color: $--color-primary;
        }
    }

    @include e(description) {
        padding-right: 10%;
        margin-top: -5px;
        font-size: 12px;
        line-height: 20px;
        font-weight: normal;

        @include when(process) {
            color: $--color-text-primary;
        }

        @include when(wait) {
			// update author: tangdm [code] color: $--color-text-placeholder;
            color: $--color-text-regular;
        }

        @include when(success) {
            color: $--color-success;
        }

        @include when(error) {
            color: $--color-danger;
        }

        @include when(finish) {
            color: $--color-primary;
        }
    }

    @include when(horizontal) {
        display: inline-block;

        @include e(line) {
			// update author: tangdm [code] height: 2px;
            height: 1px;

            top: 11px;
            left: 0;
            right: 0;

            // add author: tangdm
			margin-right: 8px !important;
			margin-left: 32px;
        }
    }

    @include when(vertical) {
        display: flex;

        @include e(head) {
            flex-grow: 0;
            width: 24px;
        }

        @include e(main) {
            padding-left: 10px;
            flex-grow: 1;
        }

        @include e(title) {
            line-height: 24px;
            padding-bottom: 8px;
        }

        @include e(line) {
			// update author: tangdm [code] width: 2px;
            width: 1px;

            top: 0;
            bottom: 0;
            left: 11px;

			// add author: tangdm
			margin-top: 32px !important;
			margin-bottom: 8px;
        }

        @include e(icon) {
            @include when(icon) {
                width: 24px;
            }
        }
    }

    @include when(center) {
        @include e(head) {
            text-align: center;
        }

        @include e(main) {
            text-align: center;
        }

        @include e(description) {
            padding-left: 20%;
            padding-right: 20%;
        }

        @include e(line) {
			// update author: tangdm [code] left: 50%; right: -50%;
			left: 44%;
			right: -44%;
        }
    }

    @include when(simple) {
        display: flex;
        align-items: center;

        @include e(head) {
            width: auto;
            font-size: 0;
            padding-right: 10px;
        }

        @include e(icon) {
            background: transparent;
            width: 16px;
            height: 16px;
            font-size: 12px;
        }

        @include e(icon-inner) {
            &[class*='el-icon']:not(.is-status) {
                font-size: 18px;
            }

            &.is-status {
                transform: scale(0.8) translateY(1px);
            }
        }

        @include e(main) {
            position: relative;
            display: flex;
            align-items: stretch;
            flex-grow: 1;
        }

        @include e(title) {
            font-size: 16px;
            line-height: 20px;
        }

        @include pseudo('not(:last-of-type)') {
            @include e(title) {
                max-width: 50%;
                word-break: break-all;
            }
        }

        @include e(arrow) {
            flex-grow: 1;
            display: flex;
            align-items: center;
            justify-content: center;

            &::before,
            &::after {
                content: '';
                display: inline-block;
                position: absolute;
                height: 15px;
                width: 1px;
                background: $--color-text-placeholder;
            }

            &::before {
                transform: rotate(-45deg) translateY(-4px);
                transform-origin: 0 0;
            }

            &::after {
                transform: rotate(45deg) translateY(4px);
                transform-origin: 100% 100%;
            }
        }

        @include pseudo(last-of-type) {
            @include e(arrow) {
                display: none;
            }
        }
    }
}




@include b(carousel) {
  position: relative;

  @include m(horizontal) {
    overflow-x: hidden;
  }

  @include m(vertical) {
    overflow-y: hidden;
  }

  @include e(container) {
    position: relative;
    height: 300px;
  }

  @include e(arrow) {
    border: none;
    outline: none;
    padding: 0;
    margin: 0;
    height: $--carousel-arrow-size;
    width: $--carousel-arrow-size;
    cursor: pointer;
    transition: .3s;
    border-radius: 50%;
    background-color: $--carousel-arrow-background;
    color: $--color-white;
    position: absolute;
    top: 50%;
    z-index: 10;
    transform: translateY(-50%);
    text-align: center;
    font-size: $--carousel-arrow-font-size;

    @include m(left) {
      left: 16px;
    }

    @include m(right) {
      right: 16px;
    }

    &:hover {
      background-color: $--carousel-arrow-hover-background;
    }

    & i {
      cursor: pointer;
    }
  }

  @include e(indicators) {
    position: absolute;
    list-style: none;
    margin: 0;
    padding: 0;
    z-index: #{$--index-normal + 1};

    @include m(horizontal) {
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
    }

    @include m(vertical) {
      right: 0;
      top: 50%;
      transform: translateY(-50%);
    }

    @include m(outside) {
      bottom: #{$--carousel-indicator-height + $--carousel-indicator-padding-vertical * 2};
      text-align: center;
      position: static;
      transform: none;
      .el-carousel__indicator:hover button {
        opacity: 0.64;
      }
      button {
        background-color: $--carousel-indicator-out-color;
        opacity: 0.24;
      }
    }

    @include m(labels) {
      left: 0;
      right: 0;
      transform: none;
      text-align: center;

      .el-carousel__button {
        height: auto;
        width: auto;
        padding: 2px 18px;
        font-size: 12px;
      }

      .el-carousel__indicator {
        padding: 6px 4px;
      }
    }
  }

  @include e(indicator) {
    background-color: transparent;
    cursor: pointer;

    &:hover button {
      opacity: 0.72;
    }

    @include m(horizontal) {
      display: inline-block;
      padding: $--carousel-indicator-padding-vertical $--carousel-indicator-padding-horizontal;
    }

    @include m(vertical) {
      padding: $--carousel-indicator-padding-horizontal $--carousel-indicator-padding-vertical;
      .el-carousel__button {
        width: $--carousel-indicator-height;
        height: #{$--carousel-indicator-width / 2};
      }
    }

    @include when(active) {
      button {
        opacity: 1;
      }
    }
  }

  @include e(button) {
    display: block;
    opacity: 0.48;
    width: $--carousel-indicator-width;
    height: $--carousel-indicator-height;
    background-color: $--color-white;
    border: none;
    outline: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    transition: .3s;
  }
}

.carousel-arrow-left-enter,
.carousel-arrow-left-leave-active {
  transform: translateY(-50%) translateX(-10px);
  opacity: 0;
}

.carousel-arrow-right-enter,
.carousel-arrow-right-leave-active {
  transform: translateY(-50%) translateX(10px);
  opacity: 0;
}





@include b(carousel) {
  @include e(item) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: inline-block;
    overflow: hidden;
    z-index: #{$--index-normal - 1};

    @include when(active) {
      z-index: #{$--index-normal + 1};
    }

    @include when(animating) {
      transition: transform .4s ease-in-out;

	  // add author: tangdm
	  img {
          width: 100%;
		  height: 100%;
          border-radius: $--border-radius-base;
	  }
    }

    @include m(card) {
      width: 50%;
      transition: transform .4s ease-in-out;
      &.is-in-stage {
        cursor: pointer;
        z-index: $--index-normal;
        &:hover .el-carousel__mask,
        &.is-hover .el-carousel__mask {
          opacity: 0.12;
        }
      }
      &.is-active {
        z-index: #{$--index-normal + 1};
      }
    }
  }

  @include e(mask) {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: $--color-white;
    opacity: 0.24;
    transition: .2s;
  }
}






@include b(collapse) {
    border-top: 1px solid $--collapse-border-color;
    border-bottom: 1px solid $--collapse-border-color;
}
@include b(collapse-item) {
    @include when(disabled) {
        .el-collapse-item__header {
            color: $--font-color-disabled-base;
            cursor: not-allowed;
        }
    }
    @include e(header) {
        display: flex;
        align-items: center;
		// delete author: tangdm
		//height: $--collapse-header-height;
		// line-height: $--collapse-header-height;

		// add author: tangdm
		padding: 16px 0;
		line-height: 1.5;

        background-color: $--collapse-header-background-color;
        color: $--collapse-header-font-color;
        cursor: pointer;
        border-bottom: 1px solid $--collapse-border-color;
        font-size: $--collapse-header-font-size;
        font-weight: 500;
        transition: border-bottom-color 0.3s;
        outline: none;
        @include e(arrow) {
			// add author: tangdm
			color: $dg--collapse-header-arrow-font-color;

            margin: 0 8px 0 auto;
            transition: transform 0.3s;
            font-weight: 300;
            @include when(active) {
                transform: rotate(90deg);
            }
        }
        &.focusing:focus:not(:hover) {
            color: $--color-primary;
        }
        @include when(active) {
            border-bottom-color: transparent;
        }
    }

    @include e(wrap) {
        will-change: height;
        background-color: $--collapse-content-background-color;
        overflow: hidden;
        box-sizing: border-box;
        border-bottom: 1px solid $--collapse-border-color;
    }

    @include e(content) {
		// update author: tangdm [code] padding-bottom: 25px; line-height: 1.769230769230769;
        padding-bottom: 16px;
		line-height: 1.5;

        font-size: $--collapse-content-font-size;
        color: $--collapse-content-font-color;
    }

    &:last-child {
        margin-bottom: -1px;
    }
}













@include b(cascader-panel) {
    display: flex;
    border-radius: $--cascader-menu-radius;

	// update author: tangdm [code] font-size: $--cascader-menu-font-size;
	@include mq($large) {
		font-size: $dg--font-large;
	}
	@include mq($medium) {
		font-size: $dg--font-medium;
	}
	@include mq($small) {
		font-size: $dg--font-small;
	}

    @include when(bordered) {
        border: $--cascader-menu-border;
        border-radius: $--cascader-menu-radius;
    }
}

@include b(cascader-menu) {
    min-width: 180px;
    box-sizing: border-box;
    color: $--cascader-menu-font-color;
    border-right: $--cascader-menu-border;

    &:last-child {
        border-right: none;
        .el-cascader-node {
            padding-right: 20px;
        }
    }

    @include e(wrap) {
        height: 204px;
    }

    @include e(list) {
        position: relative;
        min-height: 100%;
        margin: 0;
        padding: 6px 0;
        list-style: none;
        box-sizing: border-box;
    }

    @include e(hover-zone) {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
    }

    @include e(empty-text) {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        color: $--cascader-color-empty;
    }
}

@include b(cascader-node) {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 30px 0 20px;
    outline: none;

	// update author: tangdm [code] height: 34px; line-height: 34px;
	@include mq($large) {
		height: $dg--button-media-large-height;
		line-height: $dg--button-media-large-height;
	}
	@include mq($medium) {
		height: $dg--button-media-medium-height;
		line-height: $dg--button-media-medium-height;
	}
	@include mq($small) {
		height: $dg--button-media-small-height;
		line-height: $dg--button-media-small-height;
	}

    &.is-selectable.in-active-path {
        color: $--cascader-menu-font-color;
    }

    &.in-active-path,
    &.is-selectable.in-checked-path,
    &.is-active {
        color: $--cascader-menu-selected-font-color;
        font-weight: bold;
    }

    &:not(.is-disabled) {
        cursor: pointer;
        &:hover,
        &:focus {
            background: $--cascader-node-background-hover;
        }
    }

    @include when(disabled) {
        color: $--cascader-node-color-disabled;
        cursor: not-allowed;
    }

    @include e(prefix) {
        // update author: tangdm [code] left: 10px;
        position: absolute;
        right: 10px;
    }

    @include e(postfix) {
        position: absolute;
        right: 10px;
    }

    @include e(label) {
        flex: 1;
        padding: 0 10px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    > .el-radio {
        margin-right: 0;

        .el-radio__label {
            padding-left: 0;
        }
    }
}

// create author:lutz



@include b(cascader) {
    // create author:lutz
    color: $--color-text-primary;
    display: inline-block;
    position: relative;
    font-size: $--font-size-base;

	// update author: tangdm [code] line-height: $--input-height;
	@include mq($large) {
		line-height: $dg--button-media-large-height;
	}
	@include mq($medium) {
		line-height: $dg--button-media-medium-height;
	}
	@include mq($small) {
		line-height: $dg--button-media-small-height;
	}

    &:not(.is-disabled):hover {
        .el-input__inner {
            cursor: pointer;
            border-color: $--input-hover-border;
        }
    }

    .el-input {
        cursor: pointer;

        .el-input__inner {
            text-overflow: ellipsis;

            &:focus {
                border-color: $--input-focus-border;
            }
        }

        .el-icon-arrow-down {
            transition: transform 0.3s;
            font-size: 14px;

            @include when(reverse) {
                transform: rotateZ(180deg);
            }
        }

        .el-icon-circle-close:hover {
            color: $--input-clear-hover-color;
        }

        @include when(focus) {
            .el-input__inner {
                border-color: $--input-focus-border;
            }
        }
    }

    @include m(medium) {
        font-size: $--input-medium-font-size;
        line-height: $--input-medium-height;
    }

    @include m(small) {
        font-size: $--input-small-font-size;
        line-height: $--input-small-height;
    }

    @include m(mini) {
        font-size: $--input-mini-font-size;
        line-height: $--input-mini-height;
    }

    @include when(disabled) {
        .el-cascader__label {
            z-index: #{$--index-normal + 1};
            color: $--disabled-color-base;
        }
    }

    @include e(dropdown) {
        margin: 5px 0;
        font-size: $--cascader-menu-font-size;
        background: $--cascader-menu-fill;
        border: $--cascader-menu-border;
        border-radius: $--cascader-menu-radius;
        box-shadow: $--cascader-menu-shadow;
    }

    @include e(tags) {
        position: absolute;
        left: 0;
        right: 30px;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        flex-wrap: wrap;
        line-height: normal;
        text-align: left;
        box-sizing: border-box;

        .el-tag {
            display: inline-flex;
            align-items: center;
            max-width: 100%;
            margin: 2px 0 2px 6px;
            text-overflow: ellipsis;
            background: $--cascader-tag-background;

            &:not(.is-hit) {
                border-color: transparent;
            }

            > span {
                flex: 1;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .el-icon-close {
                flex: none;
                background-color: $--color-text-placeholder;
                color: $--color-white;

                &:hover {
                    background-color: $--color-text-secondary;
                }
            }
        }
    }

    @include e(suggestion-panel) {
        border-radius: $--cascader-menu-radius;
    }

    @include e(suggestion-list) {
        max-height: 204px;
        margin: 0;
        padding: 6px 0;
        font-size: $--font-size-base;
        color: $--cascader-menu-font-color;
        text-align: center;
    }

    @include e(suggestion-item) {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 34px;
        padding: 0 15px;
        text-align: left;
        outline: none;
        cursor: pointer;

        &:hover,
        &:focus {
            background: $--cascader-node-background-hover;
        }

        &.is-checked {
            color: $--cascader-menu-selected-font-color;
            font-weight: bold;
        }

        > span {
            margin-right: 10px;
        }
    }

    @include e(empty-text) {
        margin: 10px 0;
        color: $--cascader-color-empty;
    }

    @include e(search-input) {
        flex: 1;
        height: 24px;
        min-width: 60px;
        margin: 2px 0 2px 15px;
        padding: 0;
        color: $--cascader-menu-font-color;
        border: none;
        outline: none;
        box-sizing: border-box;

        &::placeholder {
            color: $--color-text-placeholder;
        }
    }
}




@include b(color-predefine) {
  display: flex;
  font-size: 12px;
  margin-top: 8px;
  width: 280px;

  @include e(colors) {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
  }

  @include e(color-selector) {
    margin: 0 0 8px 8px;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    cursor: pointer;

    &:nth-child(10n + 1) {
      margin-left: 0;
    }

    &.selected {
      box-shadow: 0 0 3px 2px $--color-primary;
    }

    > div {
      display: flex;
      height: 100%;
      border-radius: 3px;
    }

    @include when(alpha) {
      background-image: url();
    }
  }
}

@include b(color-hue-slider) {
  position: relative;
  box-sizing: border-box;
  width: 280px;
  height: 12px;
  background-color: #f00;
  padding: 0 2px;

  @include e(bar) {
    position: relative;
    background: linear-gradient(
      to right, #f00 0%,
      #ff0 17%, #0f0 33%,
      #0ff 50%, #00f 67%,
      #f0f 83%, #f00 100%);
    height: 100%;
  }

  @include e(thumb) {
    position: absolute;
    cursor: pointer;
    box-sizing: border-box;
    left: 0;
    top: 0;
    width: 4px;
    height: 100%;
    border-radius: 1px;
    background: #fff;
    border: 1px solid #f0f0f0;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
    z-index: 1;
  }

  @include when(vertical) {
    width: 12px;
    height: 180px;
    padding: 2px 0;

    .el-color-hue-slider__bar {
      background: linear-gradient(
        to bottom, #f00 0%,
        #ff0 17%, #0f0 33%,
        #0ff 50%, #00f 67%,
        #f0f 83%, #f00 100%);
    }

    .el-color-hue-slider__thumb {
      left: 0;
      top: 0;
      width: 100%;
      height: 4px;
    }
  }
}

@include b(color-svpanel) {
  position: relative;
  width: 280px;
  height: 180px;

  @include e(('white', 'black')) {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }

  @include e('white') {
    background: linear-gradient(to right, #fff, rgba(255,255,255,0));
  }

  @include e('black') {
    background: linear-gradient(to top, #000, rgba(0,0,0,0));
  }

  @include e(cursor) {
    position: absolute;

    > div {
      cursor: head;
      width: 4px;
      height: 4px;
      box-shadow: 0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0,0,0,0.3), 0 0 1px 2px rgba(0,0,0,0.4);
      border-radius: 50%;
      transform: translate(-2px, -2px);
    }
  }
}

@include b(color-alpha-slider) {
  position: relative;
  box-sizing: border-box;
  width: 280px;
  height: 12px;
  background: url();

  @include e(bar) {
    position: relative;
    background: linear-gradient(
      to right, rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 1) 100%);
    height: 100%;
  }

  @include e(thumb) {
    position: absolute;
    cursor: pointer;
    box-sizing: border-box;
    left: 0;
    top: 0;
    width: 4px;
    height: 100%;
    border-radius: 1px;
    background: #fff;
    border: 1px solid #f0f0f0;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
    z-index: 1;
  }

  @include when(vertical) {
    width: 20px;
    height: 180px;

    .el-color-alpha-slider__bar {
      background: linear-gradient(
        to bottom, rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 100%);
    }

    .el-color-alpha-slider__thumb {
      left: 0;
      top: 0;
      width: 100%;
      height: 4px;
    }
  }
}

@include b(color-dropdown) {
  width: 300px;

  @include e(main-wrapper) {
    margin-bottom: 6px;

    &::after {
      content: "";
      display: table;
      clear: both;
    }
  }

  @include e(btns) {
    margin-top: 6px;
    text-align: right;
  }

  @include e(value) {
    float: left;
    line-height: 26px;
    font-size: 12px;
    color: $--color-black;
    width: 160px;
  }

  @include e(btn) {
    border: 1px solid #dcdcdc;
    color: #333;
    line-height: 24px;
    border-radius: 2px;
    padding: 0 20px;
    cursor: pointer;
    background-color: transparent;
    outline: none;
    font-size: 12px;

    &[disabled] {
      color: #cccccc;
      cursor: not-allowed;
    }
    &:hover {
      color: $--color-primary;
      border-color: $--color-primary;
    }
  }

  @include e(link-btn) {
    cursor: pointer;
    color: $--color-primary;
    text-decoration: none;
    padding: 15px;
    font-size: 12px;
    &:hover {
      color: tint($--color-primary, $--button-hover-tint-percent);
    }
  }
}

@include b(color-picker) {
  display: inline-block;
  position: relative;
  line-height: normal;
  height: 40px;

  @include when(disabled) {
    .el-color-picker__trigger {
      cursor: not-allowed;
    }
  }

  @include m(medium) {
    height: 36px;

    .el-color-picker__trigger {
      height: 36px;
      width: 36px;
    }

    .el-color-picker__mask {
      height: 34px;
      width: 34px;
    }
  }

  @include m(small) {
    height: 32px;

    .el-color-picker__trigger {
      height: 32px;
      width: 32px;
    }

    .el-color-picker__mask {
      height: 30px;
      width: 30px;
    }

    .el-color-picker__icon,
    .el-color-picker__empty {
      transform: translate3d(-50%, -50%, 0) scale(0.8);
    }
  }

  @include m(mini) {
    height: 28px;

    .el-color-picker__trigger {
      height: 28px;
      width: 28px;
    }

    .el-color-picker__mask {
      height: 26px;
      width: 26px;
    }

    .el-color-picker__icon,
    .el-color-picker__empty {
      transform: translate3d(-50%, -50%, 0) scale(0.8);
    }
  }

  @include e(mask) {
    height: 38px;
    width: 38px;
    border-radius: 4px;
    position: absolute;
    top: 1px;
    left: 1px;
    z-index: 1;
    cursor: not-allowed;
    background-color: rgba(255, 255, 255, .7);
  }

  @include e(trigger) {
    display: inline-block;
    box-sizing: border-box;
    height: 40px;
    width: 40px;
    padding: 4px;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    font-size: 0;
    position: relative;
    cursor: pointer;
  }

  @include e(color) {
    position: relative;
    display: block;
    box-sizing: border-box;
    border: 1px solid #999;
    border-radius: $--border-radius-small;
    width: 100%;
    height: 100%;
    text-align: center;

    @include when(alpha) {
      background-image: url();
    }
  }

  @include e(color-inner) {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
  }

  @include e(empty) {
    font-size: 12px;
    color: #999;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
  }

  @include e(icon) {
    display: inline-block;
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    color: $--color-white;
    text-align: center;
    font-size: 12px;
  }

  @include e(panel) {
    position: absolute;
    z-index: 10;
    padding: 6px;
    box-sizing: content-box;
    background-color: $--color-white;
    border: 1px solid $--border-color-lighter;
    border-radius: $--border-radius-base;
    box-shadow: $--dropdown-menu-box-shadow;
  }
}










@include b(transfer) {
    font-size: $--font-size-base;

    @include e(buttons) {
        display: inline-block;
        vertical-align: middle;
        padding: 0 30px;
    }

    @include e(button) {
        display: block;
        margin: 0 auto;
        padding: 10px;
        border-radius: 50%;
        color: $--color-white;
        background-color: $--color-primary;
        font-size: 0;

        @include when(with-texts) {
            border-radius: $--border-radius-base;
        }

        @include when(disabled) {
            border: $--border-base;
            background-color: $--background-color-base;
            color: $--color-text-placeholder;

            &:hover {
                border: $--border-base;
                background-color: $--background-color-base;
                color: $--color-text-placeholder;
            }
        }

        &:first-child {
            margin-bottom: 10px;
        }

        &:nth-child(2) {
            margin: 0;
        }

        i,
        span {
            font-size: 14px;
            @include mq($large) {
                font-size: 14px;
            }
            @include mq($medium) {
                font-size: 14px;
            }
            @include mq($small) {
                font-size: 12px
            }
        }

        & [class*='el-icon-'] + span {
            margin-left: 0;
            @include mq($large) {
                font-size: 14px;
            }
            @include mq($medium) {
                font-size: 14px;
            }
            @include mq($small) {
                font-size: 12px
            }
        }
    }
}

@include b(transfer-panel) {
    border: 1px solid $--transfer-border-color;
    border-radius: $--transfer-border-radius;
    overflow: hidden;

    // update author: tangdm [code] background: $--color-white;
    background: $dg--transfer-background;
    display: inline-block;
    vertical-align: middle;
    width: $--transfer-panel-width;
    max-height: 100%;
    box-sizing: border-box;
    position: relative;

    @include e(body) {
        height: $--transfer-panel-body-height;

        @include when(with-footer) {
            padding-bottom: $--transfer-panel-footer-height;
        }
    }

    @include e(list) {
        // update author:tangyx [code]   padding: 6px 0;;
        margin: 0;
        padding: 8px 0;
        list-style: none;
        height: $--transfer-panel-body-height;
        overflow: auto;
        box-sizing: border-box;

        @include when(filterable) {
            height: #{$--transfer-panel-body-height - $--transfer-filter-height - 20px};
            padding-top: 0;
        }
    }

    @include e(item) {
        height: $--transfer-item-height;
        line-height: $--transfer-item-height;
        padding-left: 15px;
        display: block;

        & + .el-transfer-panel__item {
            margin-left: 0;
        }

        &.el-checkbox {
            // update author:tangdm [code] color: $--color-text-regular;
            color: $--color-text-primary;
        }

        &:hover {
            color: $--color-primary;
        }

        &.el-checkbox .el-checkbox__label {

            width: 100%;
            @include utils-ellipsis;
            display: block;
            box-sizing: border-box;
            // update author: zouwf [code] padding-left: 24px;
            padding-left: 23px;

            // update author: tangdm [code] line-height: $--transfer-item-height;
            @include mq($large) {
                line-height: $dg--height-large;
            }
            @include mq($medium) {
                line-height: $dg--height-medium;
            }
            @include mq($small) {
                line-height: $dg--height-small;
            }
        }

        .el-checkbox__input {
            position: absolute;
            // update author: tangdm [code] top: 8px;
            @include mq($large) {
                top: 8px;
            }
            @include mq($medium) {
                top: 7px;
            }
            @include mq($small) {
                top: 5px;
            }

        }
    }

	// update author: tangdm descript: update css level [code] @include e(filter)
    .el-transfer-panel__filter {
        // update author: zouwf descript: margin: 15px;
        text-align: center;
        margin: 16px 16px 8px 16px;
        box-sizing: border-box;
        display: block;
        width: auto;
        // update author: tangdm descript:  font-size: 12px;
        .el-input__inner {
            height: $--transfer-filter-height;
            width: 100%;
            font-size: 14px;
            display: inline-block;
            box-sizing: border-box;
            border-radius: #{$--transfer-filter-height / 2};
            padding-right: 10px;
            padding-left: 30px;
        }

        .el-input__icon {
            margin-left: 5px;
        }

        .el-icon-circle-close {
            cursor: pointer;
        }
    }

    .el-transfer-panel__header {
        height: $--transfer-panel-header-height;
        line-height: $--transfer-panel-header-height;
        background: $--transfer-panel-header-background-color;
        margin: 0;
        padding-left: 15px;
        border-bottom: 1px solid $--transfer-border-color;
        box-sizing: border-box;
        color: $--color-black;

        .el-checkbox {
            display: block;
            line-height: 40px;

            .el-checkbox__label {
                // update author:tangyx [code] font-size: 16px;
                color: $--color-text-primary;
                font-weight: normal;
                @include mq($large) {
                    font-size: $dg--font-large;
                }
                @include mq($medium) {
                    font-size: $dg--font-medium;
                }
                @include mq($small) {
                    font-size: $dg--font-small;
                }

                span {
                    position: absolute;
                    right: 15px;
                    // update author:tangyx [code] color: $--color-text-secondary;
                    // update author:zouwf [code]   font-size: 12px;;
                    color: $--color-text-regular;
                    font-weight: normal;
                }
            }
        }
    }

    .el-transfer-panel__footer {
        height: $--transfer-panel-footer-height;
        background: $--color-white;
        margin: 0;
        padding: 0;
        border-top: 1px solid $--transfer-border-color;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: $--index-normal;
        @include utils-vertical-center;

        .el-checkbox {
            padding-left: 20px;
            color: $--color-text-regular;
        }
    }

    .el-transfer-panel__empty {
        margin: 0;
        height: $--transfer-item-height;
        line-height: $--transfer-item-height;
        padding: 6px 15px 0;
        color: $--color-text-secondary;
        text-align: center;
    }

    .el-checkbox__label {
        padding-left: 8px;
    }

    // delete author: tangdm [code]
    //.el-checkbox__inner {
    //    height: 14px;
    //    width: 14px;
    //    border-radius: 3px;
    //    &::after {
    //        height: 6px;
    //        width: 3px;
    //        left: 4px;
    //    }
    //}

	// add author: tangdm descript: 复选框兼容问题解决
	.el-checkbox {
		display: block;
	}
}



@include b(container) {
  display: flex;
  flex-direction: row;
  flex: 1;
  flex-basis: auto;
  box-sizing: border-box;
  min-width: 0;

  @include when(vertical) {
    flex-direction: column;
  }
}




@include b(header) {
  padding: $--header-padding;
  box-sizing: border-box;
  flex-shrink: 0;
}



@include b(aside) {
  overflow: auto;
  box-sizing: border-box;
  flex-shrink: 0;
}




@include b(main) {
  // IE11 supports the <main> element partially https://caniuse.com/#search=main
  display: block;
  flex: 1;
  flex-basis: auto;
  overflow: auto;
  box-sizing: border-box;
  padding: $--main-padding;
}




@include b(footer) {
  padding: $--footer-padding;
  box-sizing: border-box;
  flex-shrink: 0;
}




@include b(timeline) {
  margin: 0;
  font-size: $--font-size-base;
  list-style: none;

  & .el-timeline-item:last-child {
    & .el-timeline-item__tail {
      display: none;
    }
  }
}




@include b(timeline-item) {
  position: relative;
  padding-bottom: 20px;

  @include e(wrapper) {
    position: relative;
    padding-left: 28px;
    top: -3px;
  }

  @include e(tail) {
    position: absolute;
    left: 4px;
    height: 100%;
    border-left: 2px solid $--timeline-node-color;
  }

  @include e(icon) {
    color: $--color-white;
    font-size: $--font-size-small;
  }

  @include e(node) {
    position: absolute;
    background-color: $--timeline-node-color;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;

    @include m(normal) {
      left: -1px;
      width: $--timeline-node-size-normal;
      height: $--timeline-node-size-normal;
    }
    @include m(large) {
      left: -2px;
      width: $--timeline-node-size-large;
      height: $--timeline-node-size-large;
    }

    @include m(primary) {
      background-color: $--color-primary;
    }
    @include m(success) {
      background-color: $--color-success;
    }
    @include m(warning) {
      background-color: $--color-warning;
    }
    @include m(danger) {
      background-color: $--color-danger;
    }
    @include m(info) {
      background-color: $--color-info;
    }
  }

  @include e(dot) {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  @include e(content) {
    color: $--color-text-primary;
  }

  @include e(timestamp) {
    color: $--color-text-secondary;
    line-height: 1;
    font-size: $--font-size-small;

    @include when(top) {
      margin-bottom: 8px;
      padding-top: 4px;
    }
    @include when(bottom) {
      margin-top: 8px;
    }
  }
}




$typeMap: (
  primary: $--link-primary-font-color, 
  danger: $--link-danger-font-color, 
  success: $--link-success-font-color, 
  warning: $--link-warning-font-color, 
  info: $--link-info-font-color);

@include b(link) {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  position: relative;
  text-decoration: none;
  outline: none;
  cursor: pointer;
  padding: 0;
  font-size: $--link-font-size;
  font-weight: $--link-font-weight;

  @include when(underline) {
    &:hover:after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      height: 0;
      bottom: 0;
      border-bottom: 1px solid $--link-default-active-color
    }
  }

  @include when(disabled) {
    cursor: not-allowed;
  } 

  & [class*="el-icon-"] {
    & + span {
      margin-left: 5px;
    }
  }
    
    
  &.el-link--default  {
    color: $--link-default-font-color;
    &:hover {
      color: $--link-default-active-color
    }
    &:after {
      border-color: $--link-default-active-color
    }
    @include when(disabled) {
      color: $--link-disabled-font-color
    }
  }

  @each $type, $primaryColor in $typeMap {
    &.el-link--#{$type} {
      color: $primaryColor;
      &:hover {
        color: mix($primaryColor, $--color-white, 80%)
      }
      &:after {
        border-color: $primaryColor
      }
      @include when(disabled) {
        color: mix($primaryColor, $--color-white, 50%)
      }
      @include when(underline) {
        &:hover:after {
          border-color: $primaryColor
        }
      }
    }
  }
    
}




@include b(divider) {
  background-color: $--border-color-base;
  position: relative;

  @include m(horizontal) {
    display: block;
    height: 1px;
    width: 100%;
    margin: 24px 0;
  }

  @include m(vertical) {
    display: inline-block;
    width: 1px;
    height: 1em;
    margin: 0 8px;
    vertical-align: middle;
    position: relative;
  }

  @include e(text) {
    position: absolute;
    background-color: $--color-white;
    padding: 0 20px;
    font-weight: 500;
    color: $--color-text-primary;
    font-size: 14px;

    @include when(left) {
      left: 20px;
      transform: translateY(-50%);
    }

    @include when(center)  {
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
    }

    @include when(right)  {
      right: 20px;
      transform: translateY(-50%);
    }
  }
}



%size {
    width: 100%;
    height: 100%;
}

@include b(image) {
    position: relative;
    display: inline-block;
    overflow: hidden;

    @include e(inner) {
        @extend %size;
        vertical-align: top;

        @include m(center) {
            position: relative;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: block;
        }
    }

    @include e(placeholder) {
        @extend %size;
        background: $--background-color-base;
    }

    @include e(error) {
        @extend %size;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        background: $--background-color-base;
        color: $--color-text-placeholder;
        vertical-align: middle;
    }

    @include e(preview) {
        cursor: pointer;
    }
}

@include b(image-viewer) {
    @include e(wrapper) {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }

    @include e(btn) {
        position: absolute;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        opacity: 0.8;
        cursor: pointer;
        box-sizing: border-box;
        user-select: none;
    }

    @include e(close) {
        top: 40px;
        right: 40px;
        width: 40px;
        height: 40px;
        font-size: 40px;
    }

    @include e(canvas) {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    @include e(actions) {
        left: 50%;
        bottom: 30px;
        transform: translateX(-50%);
        width: 282px;
        height: 44px;
        padding: 0 23px;
        background-color: #606266;
        border-color: #fff;
        border-radius: 22px;

        @include e(actions__inner) {
            width: 100%;
            height: 100%;
            text-align: justify;
            cursor: default;
            font-size: 23px;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: space-around;
        }
    }

    @include e(prev) {
        top: 50%;
        transform: translateY(-50%);
        width: 44px;
        height: 44px;
        font-size: 24px;
        color: #fff;
        background-color: #606266;
        border-color: #fff;
        left: 40px;
    }

    @include e(next) {
        top: 50%;
        transform: translateY(-50%);
        width: 44px;
        height: 44px;
        font-size: 24px;
        color: #fff;
        background-color: #606266;
        border-color: #fff;
        right: 40px;
        text-indent: 2px;
    }

    @include e(mask) {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        opacity: 0.5;
        background: #000;
    }
}

.viewer-fade-enter-active {
    animation: viewer-fade-in 0.3s;
}

.viewer-fade-leave-active {
    animation: viewer-fade-out 0.3s;
}

@keyframes viewer-fade-in {
    0% {
        transform: translate3d(0, -20px, 0);
        opacity: 0;
    }
    100% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

@keyframes viewer-fade-out {
    0% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
    100% {
        transform: translate3d(0, -20px, 0);
        opacity: 0;
    }
}




@include b(calendar) {
  background-color:#fff;

  @include e(header) {
    display: flex;
    justify-content: space-between;
    padding: 12px 20px;
    border-bottom: $--table-border;
  }

  @include e(title) {
    color: #000000;
    align-self: center;
  }

  @include e(body) {
    padding: 12px 20px 35px;
  }
}

@include b(calendar-table) {
  table-layout: fixed;
  width: 100%;

  thead th {
    padding: 12px 0;
    color: $--color-text-regular;
    font-weight: normal;
  }

  &:not(.is-range) {
    td.prev,
    td.next {
      color: $--color-text-placeholder;
    }
  }

  td {
    border-bottom: $--calendar-border;
    border-right: $--calendar-border;
    vertical-align: top;
    transition: background-color 0.2s ease;

    @include when(selected) {
      background-color: $--calendar-selected-background-color;
    }

    @include when(today) {
      color: $--color-primary;
    }
  }

  tr:first-child td {
    border-top: $--calendar-border;
  }

  tr td:first-child {
    border-left: $--calendar-border;
  }

  tr.el-calendar-table__row--hide-border td {
    border-top: none;
  }

  @include b(calendar-day) {
    box-sizing: border-box;
    padding: 8px;
    height: $--calendar-cell-width;
    &:hover {
      cursor: pointer;
      background-color: $--calendar-selected-background-color;
    }
  }
}




@include b(backtop) {
  position: fixed;
  background-color: $--backtop-background-color;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: $--backtop-font-color;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: 0 0 6px rgba(0,0,0, .12);
  cursor: pointer;
  z-index: 5;

  &:hover {
    background-color: $--backtop-hover-background-color
  }
}





@include b(page-header) {
  display: flex;
  line-height: 24px;

  @include e(left) {
    display: flex;
    cursor: pointer;
    margin-right: 40px;
    position: relative;

    &::after {
      content: "";
      position: absolute;
      width: 1px;
      height: 16px;
      right: -20px;
      top: 50%;
      transform: translateY(-50%);
      background-color: $--border-color-base;
    }

    .el-icon-back {
      font-size: 18px;
      margin-right: 6px;
      align-self: center;
    }

    @include e(title) {
      font-size: 14px;
      font-weight: 500;
    }
  }

  @include e(content) {
    font-size: 18px;
    color: $--color-text-primary;
  }
}





@include b(avatar) {
  display: inline-block;
  box-sizing: border-box;
  text-align: center;
  overflow: hidden;
  color: $--avatar-font-color;
  background: $--avatar-background-color;
  width: $--avatar-large-size;
  height: $--avatar-large-size;
  line-height: $--avatar-large-size;
  font-size: $--avatar-text-font-size;

  >img {
    display: block;
    height: 100%;
    vertical-align: middle;
  }

  @include m(circle) {
    border-radius: 50%;
  }

  @include m(square) {
    border-radius: $--avatar-border-radius;
  }

  @include m(icon) {
    font-size: $--avatar-icon-font-size;
  }

  @include m(large) {
    width: $--avatar-large-size;
    height: $--avatar-large-size;
    line-height: $--avatar-large-size;
  }

  @include m(medium) {
    width: $--avatar-medium-size;
    height: $--avatar-medium-size;
    line-height: $--avatar-medium-size;
  }

  @include m(small) {
    width: $--avatar-small-size;
    height: $--avatar-small-size;
    line-height: $--avatar-small-size;
  }
}




@keyframes el-drawer-fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@mixin drawer-animation($direction) {

  @keyframes #{$direction}-drawer-in {
    0% {

      @if $direction == ltr {
        transform: translate(-100%, 0px);
      }

      @if $direction == rtl {
        transform: translate(100%, 0px);
      }

      @if $direction == ttb {
        transform: translate(0px, -100%);
      }

      @if $direction == btt {
        transform: translate(0px, 100%);
      }
    }

    100% {
      @if $direction == ltr {
        transform: translate(0px, 0px);
      }

      @if $direction == rtl {
        transform: translate(0px, 0px);
      }

      @if $direction == ttb {
        transform: translate(0px, 0px);
      }

      @if $direction == btt {
        transform: translate(0px, 0px);
      }
    }
  }

  @keyframes #{$direction}-drawer-out {
    0% {
      @if $direction == ltr {
        transform: translate(0px, 0px);
      }

      @if $direction == rtl {
        transform: translate(0px, 0px);;
      }

      @if $direction == ttb {
        transform: translate(0px, 0px);
      }

      @if $direction == btt {
        transform: translate(0px, 0);
      }
    }

    100% {
      @if $direction == ltr {
        transform: translate(-100%, 0px);
      }

      @if $direction == rtl {
        transform: translate(100%, 0px);
      }

      @if $direction == ttb {
        transform: translate(0px, -100%);
      }

      @if $direction == btt {
        transform: translate(0px, 100%);
      }
    }
  }
}

@mixin animation-in($direction) {
  .el-drawer__open &.#{$direction} {
    animation: #{$direction}-drawer-in 225ms cubic-bezier(0, 0, .2, 1) 0ms;
  }
}

@mixin animation-out($direction) {
  &.#{$direction} {
    animation: #{$direction}-drawer-out 225ms cubic-bezier(0, 0, .2, 1) 0ms;
  }
}

@include drawer-animation(rtl);
@include drawer-animation(ltr);
@include drawer-animation(ttb);
@include drawer-animation(btt);

$directions: rtl, ltr, ttb, btt;

@include b(drawer) {
  position: absolute;
  box-sizing: border-box;
  background-color: $--dialog-background-color;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2),
  0 16px 24px 2px rgba(0, 0, 0, 0.14),
  0 6px 30px 5px rgba(0, 0, 0, 0.12);
  overflow: hidden;

  @each $direction in $directions {
    @include animation-out($direction);
    @include animation-in($direction);
  }

  &__header {
    align-items: center;
    color: rgb(114, 118, 123);
    display: flex;
    margin-bottom: 32px;
    padding: $--dialog-padding-primary;
    padding-bottom: 0;
    & > :first-child {
      flex: 1;
    }
  }

  &__title {
    margin: 0;
    flex: 1;
    line-height: inherit;
    font-size: 1rem;
  }

  &__close-btn {
    border: none;
    cursor: pointer;
    font-size: $--font-size-extra-large;
    color: inherit;
    background-color: transparent;
  }

  &__body {
    flex: 1;
    & > * {
      box-sizing: border-box;
    }
  }

  &.ltr, &.rtl {
    height: 100%;
    top: 0;
    bottom: 0;
  }

  &.ttb, &.btt {
    width: 100%;
    left: 0;
    right: 0;
  }

  &.ltr {
    left: 0;
  }

  &.rtl {
    right: 0;
  }

  &.ttb {
    top: 0;
  }

  &.btt {
    bottom: 0;
  }
}

.el-drawer__container {
  position: relative;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
}

.el-drawer-fade-enter-active {
  animation: el-drawer-fade-in 225ms cubic-bezier(0, 0, 0.2, 1) 0ms;
}

.el-drawer-fade-leave-active {
  animation: el-drawer-fade-in 225ms cubic-bezier(0, 0, 0.2, 1) 0ms reverse;
}



@font-face {
    font-family: 'iconfont';
    src: url('#{$dg--font-path}/iconfont.eot?t=1561094497012'); /* IE9 */
    src: url('#{$dg--font-path}/iconfont.eot?t=1561094497012#iefix') format('embedded-opentype'),
        /* IE6-IE8 */
            url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAABA4AAsAAAAAHfgAAA/pAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCEegqsPKNZATYCJANACyIABCAFhG0HgRgbqRgzo8LGARBIPg/Zf3XAG6JPXSSEAKeGdbdpE7B9sLbMYVYjn4A3BT+RyryMEapIV/8XuaaKBO/zUEoe+A7138hcGJC8CKY2Jshe4q1AqR6BWipynUN06j3yeTD4plGTgkORFMwgtmPmdiq8ZkI2F6Nbb87AtoNYTcz959Rm7CRtZwQFWQqRmwLAbem2+wQlgP+v+leBYZdtXgQ3Web86bv9I1SdPGfv3uRIn1i1T/Y95SWEtCK0dTX19QYIgFA739q36gJVbPB2oWBSipaws1/H7lg5mXNffDlcq2nmEdLOme7i+xOijaP9hmcioUVyx22q83i0VTDYMjbdKzEDsEEP1qOfTAA06TUDLZ7X9+FQqK8ACNf67AAe0qCUzADPwTAjZgC9Agk8LoBrAC/2jw9/ggMOQCRJAA24fbp2zFJAnQHJdQpDJw/Mqo5jNRqQAHNABsI7tvgN4qK5TUicGZUKGOLnW+CSP1kv2yWznH5zr05TB04nBcSzVHV3h4P1AxmRaBluS5OAkczMFIwUjjD/w2OwOCBUASJtYKt5Sx8oQF9EBgq0iDZQ4EVUgIJjcdoTFE2gmaBIQE+DIgC9B4toAf+qRVSBf1dFDagaFHWgGlA0gOrAQ6d6UHSAuoGiC9QA+XoXUIRwD/dA7Ruof0C5zxfcmYLCSRFjQlYRqWMJxuUU09C8fJRRVCTkCE4zLGP2IEYlZUKQABRZ4ARNq5WDc7ykT+hDeoqa6KOF0TpyWxEm2tr2TIvazeRDGDElqkDng/IIrXdnBYnjStdJndYplbrAyFQ3QhopWpnYyht66cabYQw05pqyCajldR3OlG79p5lqTlIMEF1+TYsGm7iqq270Wk5rMKYuEjIuod2lq5y0XkbZshOKhZsbhXaCG0STVdtJEQnEZQKGqEJhC2WbVTW3ufQ5VazKm+Ktz1h94RxjlYtjEUVE5/SMtlvPantJIpZnB1JI3nt+N0ssftUXkx+2ZFs1ReO+7SdkhA3oYfEyTdXGbvkU4d3IMhI7a17qTh09AmDlZC54HAAjuT4BB9y2Xi/LUq3GZyGr2AhYwqW1FyaJbffGVXZUejLKMkmktE+UpaRGoWX1OWlWZzQJrIqicOh3iLJWgQyFvwrM9uw/I5iL85/9NxjFcerM/r+s5BY6307D9Rd5DhJ7GTZ3NvuaQ63p+0alAUBhA7pEM89gKAvqbejqGHoUJniBvUAz7iHfpavADM3HcDTT0+1tQrZfn4OJraFM2YRik/k++17zLegqdCaN2nQ/MoiYTZVid9qnS0gLIwDC8syUrj5bugcZXH3gO91m17FZRBnGoCo+JXJW98XsXRWXWq7vImembdk6fMrWPuwMAlU6vVB8wpx56ckocTEz0n2Ph/q47Iyw69GqxKbIGqTgptGCzlldzQxgaXoxr1yHl/I46BLRLSBk4GBx0kL5xdQAIUtELhZxLl9tguhMhsuW94yw7qTJeQKuY+JahhQxOW47YjWAci9nCV/+e5MxXquAMjyE99SVE6Qvf2y5w04ejtzGW+5rMVUTwDhpUbhsmVsgCvtRTrFaunOWU4dVH4hJGsM7YscFsSUiQmzlyhjEZapHqfqBtLCFaO4XWypEIKz4q7gPK4twn5OTn9srl+IEzcGZ4qR+cR9AtaZw19uIcvcXUWVrdalaEWcQt82KCEB49Xn51QJwIRFR+CBu9umDeJICA9udc15cK/Xk6a82LyK3tGfimnG1Ah8EtNgkxJTsqNCMT9URWqXD6qQoEIil+jwkFzfzfF8Upb8bToHOiQ70pV5XeiWGlnEhL854vGWHE/4ylubul2nH++RL27fdqIUNKzO1s3qhSOKJ0+gg19vjvrF1TYe4npDAOFproZzhj/KDSS2MRDX/02Cxs6FWs0eGefWATNwp0Z1Lgc8rizkcWT2ZRi3ZGPVeNdDEVaso6l1BimZ0f9aI2fkZsMwMOnZroAf+IAYB+wtUE3pEg+ZL5/HnyPZJCDy30urPltt5Lxb3/50LU6XBEezwvzxm9oGk9P8Lvf9GR/TqS70gsEPWP+rrerGzQft4ehh11cY7vyMt+8rMXgYGAkLCY+xxEBgS5QC55NNLABSwat5NoCsEVm3ZIi+yXCb3ev9//sJ/V3z875//DjIMacv/Lv29cfnBzA/5/ED7D/6uMcgvvxp68c8LTxHWLW6eEU3mLDss5McULJeXW+e3RLtjRejkiOOt77EOA4hYpQ56cbVetn1OU3lzarQiQJNgNwoTG92oUis5ASWJTB2Oc7kYg9xAlKmKcxCk9WqRa/l5VUUU2vcIZM4fLQkjC/ykVinkPIoiEec4dZ5/ldfDRA7TbVQsLDe6uXsq4QAcvSS6QsHBAlKxHHoQKkV0NHzQwbQo1zl6xS9GeCOPZz3aR4quM6uQr+xPLSJ3MMKO9lZQ84tTN82nWpILNp1AtCYEEeDG3pvXkcvIfNetYTZyQfHM+VWb8smaxE3rqCfkus0+lkmjbhQvIIbn/JJbAWd0A32G6/OK5+hHBK6gXEtnaSt4ZcTLFYaIYo/WyW7tXAaaOZnumFrcMjxATPSYpow1ddX5iclWSjzhptvnwsdGe3foYsz9cX6QOXKuRrTvqUmVyXvO2itLv61UFAy15dnmBwUG6SQQQHCsWeZRa8CbzGIYwMthLwFsmiu0NSSi7yAgvPXuRydP5jOQbL5sjx551sYbtm71akq+Bks4m4BBt266z33Wv7LZ2lrUcNS8xGeka5nS9aX6kDRTmvUPvBqnZK3sHPU23QAqpFRXpKTPp6tRqvu8lZi6qBV9aiQf3Dd4piJJcub8nhHilIIKzLI6tauUyftoooSkmzNXjBQrrLiEGrxKsknuyj7XfOpd7u/eVsqTrgTZrrXpoD/bbhhoYKvbztOKbdoXihNvnRdlHXRjOt1c8dNsNS0w8G82tR6w8c/t8zHdt/QqTpypmAWaf8mN4ccKO3oKY2WCCkHP7W2XN4OxQqUy6OC9u5ek87EJk8zhFaEVbpI0sClepg07HH5Y89fXFUuV6qUaIX+tneQJ+/2C+3aCJ20khBMLzZW4/UuJ/iIujdBYoQEEyZavWb262gbUqkV0P8deRz86xJXSfOle3bQIF+vrR+AnPF4QUkDq7oRqM5hfEtIY0pBvdDQ1msLtXdv6Jam+LAWgccnmuXGrC/bEtp8SMMw2zB+YNyMtGV4tMC1ZiADatm/iCGre0fIaUEPTXSBw5zn/CMrrYDcSpYS7ukMp9IjfaqiB1oc60MBrNXDPIddatBwYOLglPCkRTuz6okXg0LphW/HLROkktSx92Aj2SXn4UaKyBKp1L52OV0u8PZNK/e3tuxvTX3WUq2IcXN2RwXNESsnib8sHSHzlYmCT1/3MtYOpBEZ1Eej9/AwewVwM0c/f4H+Lgps39bsmmHTcKIJNMhqeGTRkqj3dnkpqdpF/nD6j5+XPfjQq4KF1cCpv4jYwAoPCzpDFREnnTLzGkUUkoUyHsSBxBodxMyq4MIJe/Kh9e7iVRcraKrkBOFlk5kbVnmQlvtvLteHcjHIqqmc7vyExtHgTuv7vbxYbpfB4OUP9caC0Z9QQQa/V2NAX0uVvpEOcR1mFDERCgKuTf55f0G1fGYHJPnDN+bkEdb8vH6YbLYlT/Ejh6BbpZR6dsCvSht4rnpdg6TsJ+v8fGeYZGkFh+GeRp/iBBD/nND+A5MsWUJ2KivrwsUYdCifh3BxSMGP2ITnrkD1VDo0UjOC9xzN5pCHb9eY3qGX4gp4RZ0lM9odbza8lqQ99hAj9aLS1UrWWo4OKyr064dBQG26hSbxEumgHwTZoZJh3WGcK7zy+F+GTnaUwuulXoohUmHtJSG3n8/buT99ZgZ83qHBhLsn6lW8Qk/QSOBfn274SDDII6fcOvGmcDXMIIVou56d0XWxcU8p1iHEvrRBwD/8hgk6rno28xLhyRekQmJ9KH2cdqVa+3BmlbDhBZVit8SothnHdw7fiGP+A8WdnEOTFNlyIujcSJauwMlTAgFmG/gszcCOl+dqNlWBpa3D60QceM8rDSYnxoCBo16bPiAVGYaYdh42tLIWsO8MolHuQ70jLotjFuLPBsUm7FJYvOZNeuBtbIF3bJ3hgxbyHSnWSJ4+v6N1O/0DQeLXC8Wl28MY2e9Ua7hlC/Bnu5Z19tsWGk16myJFhCSY4NxFcg03hw6NGm+UrckBinicbvDG4q1wGxechpgj6FFluPNQAwkGCI42bKkCFxZGuJUjYBCaCuAkTHRMt9WDH0z0WVmBhwMkZ88e06aI+mUM0IZBtImTjgQGIHrmtoQEDodbyZNAP1NFCSE6GWg8Y2Bq6LzQQ9zn5MKHtAvPlbcP0Ud0N5kVkKt9fSH72kQJYDe6Do1DyQn6MUCeMaQrl0NGfTTFZrVD7KH16KbrPMAYthQKXGovFiTwLmfLlDBdI4MYrbh8McHtvYgyytqKysB2vCnIPVG6Gug4M6hgdoNQD06ZP/FziiG5QUF+/O0mdNWv1HXGod+KUPrClIxTfH7LAcd3HP2w1tXNnF9308/FnWm+Ofelt79HNX7N1TBNMTrfxiuov9r3fdixkZFoZUzjO0HfbGMUIlHHVSXlEJBCtqeVMdYkDPgB47Qx0mXaqGqm8zSXze7pJUncfXlLsdJzF1faZYD4NOqR1lc77yi/mgmr6v6qBsi3n+9/rpKvJKzGgA4G8Eq1hXA3VoEipr09ROOUbasPcqaiNekzNoR+7PKbHj6drVFeji6mnCmt9fbLif6rqee+nUckyVc2j9aZ/O6ZR1vxF/xXJFuf+J+25jX405zWq2pTdUo+r21Jj6xusyo9BNZWxprzyRY9cHtE26h/4d0IG5yzEieTak3ORpckomJRDXm/uJsSBJMx4RXKRYOQIE0sV7H6RqFPbAIDEw8/npVPhxt+XPUFtW/e8eC76G85/OW+6H7wwYaY7c9g3hauDoZIA/Jr0ZjwpH/1zvZ/3J0b3VFbad+o3WmRETfUi4Bdl+dATlmyS2fsTlil9EEnpQILzjMyxzUAFxQSqcHGgKUCH0VvkpkFAmQDAzBwFQHgHAYx1EiB4tRIlxj4GEqJ6gOEDAkj7/nVr89p9+uohI60ogF1A8+Bl5dcrZ+cvVM3SHPTb0/8wF10Hm+U62vaCHnMVg5SutrVKkDk4eFaeDq0NEHM4Ia/LY63xsFpJ3KBLHtxw5UGGqGrOLwDmkl3jAk9evrqKff8vSGksKlMOe8j+B2WFfniwsbTOEPlCfKbDNsVcdMpWnXEJ9H2zwAHPM46s2hyAiO/uBHHV0rFAY3Swmp1OZiVL9swNeWLwHRENv0YQAqGQBMIgKYRDxK/DKhpioM9XF3w3xo+oRi4SETiJsZKzLYSFhUpL8v7xQqJX47jwPOla6EBc3M/T8eaw161ks7bwjOivt4Ra9NVhAAAA')
            format('woff2'),
        url('#{$dg--font-path}/iconfont.woff?t=1561094497012') format('woff'),
        url('#{$dg--font-path}/iconfont.ttf?t=1561094497012') format('truetype'),
        /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
            url('#{$dg--font-path}/iconfont.svg?t=1561094497012#iconfont') format('svg'); /* iOS 4.1- */
}

/* 需要在这里加入如下样式 */
[class^='dg-icon-'],
[class*='dg-icon-'] {
    font-family: 'iconfont' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    vertical-align: baseline;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.iconfont {
    font-family: 'iconfont' !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.dg-icon-jpeg:before {
    content: '\e6c2';
}

.dg-icon-mp:before {
    content: '\e608';
}

.dg-icon-doc:before {
    content: '\e67c';
}

.dg-icon-ppt:before {
    content: '\e600';
}

.dg-icon-xls:before {
    content: '\e602';
}

.dg-icon-bmp:before {
    content: '\ec18';
}

.dg-icon-gif:before {
    content: '\ec19';
}

.dg-icon-JPG:before {
    content: '\ec1a';
}

.dg-icon-png:before {
    content: '\ec1b';
}

.dg-icon-xlsx:before {
    content: '\e650';
}

.dg-icon-vidio:before {
    content: '\e6d8';
}

.dg-icon-mp4:before {
    content: '\e601';
}

.dg-icon-gif-copy:before {
    content: '\ec1d';
}

.dg-icon-document:before {
    content: '\ec1e';
}

.dg-icon-fullscreen:before {
    content: '\ec1f';
}

.dg-icon-scalescreen:before {
    content: '\ec20';
}














@include B(radio-group) {

    line-height: 1.5;
    
    @include e(vertical) {
        display: block;
        margin: 10px;

        & + & {
            margin-left: 10px;
        }
    }
}








@include B(checkbox-group) {

    @include e(row) {
        display: inline-block;
    }

    @include e(quick) {
        margin-bottom: $dg--checkbox-group--font-size;
    }

    @include e(margin) {
        margin-right: 30px;
    }

    @include e(margin-button) {
        margin-bottom: $dg--checkbox-group--font-size;
    }

    @include e(vertical) {
        &.el-checkbox {
            display: table;
        }

        & + & {
            margin-top: $dg--checkbox-group--font-size;
        }
    }

}






@include B(drag-tags) {
    @include e(content) {
        display: flex;
		cursor: grab;
        transition: transform 0.3s linear;
		transform: translateX(0px);
		// change tags un-select-text
		.el-tag {
			user-select: none;
		}
    }
}

@include b(select) {
	.el-tag {
		color: $--color-text-secondary;
		border:1px solid $dg--select-tag-border-color;
		margin-left: 2px;
		font-size: $--font-size-small;
		padding: 0 12px;
		max-width: 120px;
		@include mq($large) {
			height: $dg--tag-medium-height;
			line-height: $dg--tag-medium-height - 2;
		}
		@include mq($medium) {
			height: $dg--tag-small-height;
			line-height: $dg--tag-small-height - 2;
		}
		@include mq($small) {
			height: $dg--tag-mini-height;
			line-height: $dg--tag-mini-height - 2;
		}
		.el-select__tags-text {
			max-width: 86px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			display: inline-block;
		}
	}
	.el-tag__close.el-icon-close {
		background: transparent;
		color: $--tag-info-color;
		vertical-align: text-top;
		&:hover {
			background: transparent;
			color: $--color-text-regular;
		}
	}
}







@include B(transfer) {
    .el-transfer-panel__header {
        background: rgba(24, 144, 255, 0.04);
    }
    & .el-transfer-tree__disabled {
        .is-disabled + span{
            color: $--color-text-placeholder;
            cursor: no-drop;
        }

    }
    //空数据
    & .el-transfer-panel__empty {
        color: $dg--transfer-panel-empty-font-color;
        height: 100%;
        display: flex;
        flex: 1;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        //font-size: $dg-transfer-panel-empty-font-size;
        @include mq($large) {
            font-size: $dg--font-large;
        }
        @include mq($medium) {
            font-size: $dg--font-medium;
        }
        @include mq($small) {
            font-size: $dg--font-small;
        }
        &::before {
            margin: 0px auto;
            content: '';
            width: 31px;
            height: 40px;
           background: url('#{$dg--image-path}/empty-icon.png') no-repeat;
            background-size: 100% 100%;
            display: block;
        }
    }
    .el-tree {
        display: inline-block;
        min-width: 100%;
        padding-top: 8px;
        &.is-filterable {
            padding-top: 0;
        }
    }
    & .el-tree-node__content,
    .el-transfer-panel__item {
        @include mq($large) {
            height: $dg--height-large;
            line-height:$dg--height-large;
        }
        @include mq($medium) {
            height: $dg--height-medium;
            line-height:$dg--height-medium;
        }
        @include mq($small) {
            height: $dg--height-small;
            line-height:$dg--height-small;
        }
    }

    //中间按钮
    & .el-transfer__buttons {
        padding: 0 16px;
        .el-transfer__button {
            min-width: auto;
            padding: 0 16px;
            border-radius: $dg--transfer-button-border-radius;
            height: $dg--transfer-button-height;
            margin-left: 0px;
            display: block;
        }
        .is-disabled {
            background-color: $--disabled-fill-base;
            color: $--disabled-color-base;
            border: 1px solid $--disabled-border-base;
            & [class*='el-icon-'] + span {
                color: $--color-text-secondary;
            }
        }
        button{
            @include mq($large) {
                font-size: $dg--font-large;
            }
            @include mq($medium) {
                font-size: $dg--font-medium;
            }
            @include mq($small) {
                font-size: $dg--font-small;
            }
        }

    }

    //底部对齐
    & .transfer-footer {
        height: 100%;
        //display: flex;
        //align-items: center;
        padding: 8px 17px;
        box-sizing: border-box;
        text-align: right;
    }

    //搜索框
    & .el-transfer-panel__filter {
        .el-input__inner {
            border-radius: $dg--transfer-filter-border-radius;
            padding-left: 8px;
            padding-right: 30px;
            @include mq($large) {
                height: $dg--height-large;
                font-size: 14px;
            }
            @include mq($medium) {
                height: $dg--height-medium;
                font-size: 14px;
            }
            @include mq($small) {
                height: $dg--height-small;
                font-size: 12px;
            }
        }
        & .el-input__prefix {
            left: auto;
            right: 10px;
            color: $--color-text-regular;
        }
        & .el-input__icon {
            @include mq($large) {
                line-height: $dg--height-large;
            }
            @include mq($medium) {
                line-height: $dg--height-medium;
            }
            @include mq($small) {
                line-height: $dg--height-small;
            }
        }
    }
}

@include B(table-transfer) {
    & .el-transfer-panel {
        min-width: 200px;
        width: auto;
        & .el-transfer-panel__body {
            padding: 0px 16px 10px 16px;
            overflow: auto;
            .el-transfer-panel__search {
                margin: 16px 0 0 0;
            }
            & .el-table {
                flex: none;
                border-radius: 5px;
                overflow: auto;
                margin-top: 16px;
            }
            & .el-pagination {
                text-align: right;
                margin-top: 10px;
            }
            td{
                padding: 6px 0 5px 0;
            }
            th {
                padding: 6px 0 5px 0;
            }
        }
    }
}





@include B(tree) {
    & .el-radio {
        margin-right: 0;
    }
    @include m(icon-class-style) {
        & .el-tree-node__content > .el-tree-node__expand-icon {
            font-size: 16px;
            //color: $--color-text-regular;
            color: $--color-text-secondary;
        }

        & .el-tree-node__content {
            &:hover {
                .el-tree-node__expand-icon {
                    color: $--color-primary;
                }
            }
        }

        & .is-radio {
            & .el-tree-node__content .el-tree-node__expand-icon {
                color: $--disabled-color-base;
            }
        }
    }
    &-filter__light {
        color: #f52e38;
    }
}

@include B(tree-node) {
    .el-tree-node__label {
        //height: 32px;
        //line-height: 32px;
        flex: 1;
        text-indent: 4px;
        border-radius: 2px;

		// update author: tangdm [code] height: 32px; line-height: 32px;
		@include mq($large) {
			height: 32px;
			line-height: 32px;
		}
		@include mq($medium) {
			height: 28px;
			line-height: 28px;
		}
		@include mq($small) {
			height: 24px;
			line-height: 24px;
		}
    }

    .dg-tree &.is-current > .el-tree-node__content {
        background-color: $dg--tree-node-checked-background-color;
        & .el-tree-node__label {
            color: $--color-primary;
        }

        //& .el-checkbox,
        //& .el-radio__input {
        //    & + .el-tree-node__label {
        //        background-color: white;
        //    }
        //}
    }

    .dg-tree &.is-focusable > .el-tree-node__content {
        .el-checkbox + .el-tree-node__label {
            color: $--select-option-color;
        }
    }

    .dg-tree & .el-tree-node__content .el-checkbox.is-checked {
        & + .el-tree-node__label {
            color: $--color-primary;
        }
    }

    & .el-tree-node__content {
        //height: 32px;

		// update author: tangdm [code] height: 32px;
		@include mq($large) {
			height: 32px;
		}
		@include mq($medium) {
			height: 28px;
		}
		@include mq($small) {
			height: 24px;
		}

        &:hover {
            background-color: $--tree-node-hover-background-color;
            //background-color: white;
            //& .el-tree-node__label {
            //    background-color: $--tree-node-hover-background-color;
            //}
        }
        & .el-checkbox.is-disabled + span.el-tree-node__label {
            color: $--disabled-color-base;
        }
        & > .el-tree-node__expand-icon {
            padding: 0px 4px;
        }
    }

    //& .el-tree-node.is-current > .el-tree-node__content {
    //    background-color: white;
    //}

    @include when(radio) {
        cursor: not-allowed;
        color: $--color-text-placeholder;
        background: $--disabled-fill-base;

        &:focus {
            > .el-tree-node__content {
                background-color: transparent;
            }
        }
        &:hover .el-tree-node__label {
            background-color: transparent;
        }
        & .el-tree-node__content:hover {
            background-color: transparent;
        }
        .el-tree-node__children .el-tree-node {
            background-color: transparent;
        }
        & .el-tree-node__content .el-tree-node__label {
            color: $--disabled-color-base;
            &:hover {
                background: transparent;
            }
        }
    }

    //树形组件复选框
    & .el-checkbox {
        & .el-checkbox__input {
            &.is-indeterminate {
                & .el-checkbox__inner {
                    background: transparent;
                    border: $--checkbox-input-border;
                    &::before {
                        border-radius: 2px;
                        transform: scale(1);
                        background-color: $--checkbox-checked-background-color;

						// update author: tangdm [code] top: 3px; left: 3px; width: 8px; height: 8px;
						@include mq($large) {
							top: 2px;
							left: 2px;
							width: 10px;
							height: 10px;
						}
						@include mq($medium) {
							top: 2px;
							left: 2px;
                            width: 10px;
                            height: 10px;
						}
						@include mq($small) {
							top: 2px;
							left: 2px;
                            width: 8px;
                            height: 8px;
						}
                    }
                }
            }

            & .el-checkbox__inner {
                &::after {
                    top: 0px;
                    left: 4px;
                    border-width: 2px;
                    border-radius: 2px;

					// update author: tangdm [code] width: 4px; height: 9px;
					@include mq($large) {
						left: 4px;
						top: 0;
						width: 4px;
						height: 9px;
					}
					@include mq($medium) {
						width: 4px;
						height: 9px;
					}
					@include mq($small) {
						width: 3px;
						height: 8px;
					}
                }
            }
        }
    }
}






// 单纯样式覆盖
@include b(cascader-menus) {
    .dg-cascader {
        .el-scrollbar__view {
            padding: 0;
        }
    }

    .dg-cascader.dg-cascader-over {
        .el-scrollbar__wrap {
            overflow-x: hidden;
        }
    }
}

// 调整级联的样式优先级
.el-cascader-menu {
	.el-cascader-menu__wrap {
		height: 204px;
	}
}






@include B(table) {
	// drag placeholder style
	.dg-table__placeholder {
		opacity: 0.8;
		background: $dg--table-drag-placeholder-bg-color;
		> td {
			background: $dg--table-drag-placeholder-bg-color;
		}
	}
	// adjust button's height for button
	.el-button--text {
		@include mq($large) {
			height: $dg--font-large * 1.5;
		}
		@include mq($medium) {
			height: $dg--font-medium * 1.5;
		}
		@include mq($small) {
			height: $dg--font-small * 1.5;
		}
		padding-top: 0;
		padding-bottom: 0;
	}
	.el-button--small {
		@include mq($large) {
			font-size: $dg--font-large;
		}
		@include mq($medium) {
			font-size: $dg--font-medium;
		}
		@include mq($small) {
			font-size: $dg--font-small;
		}
	}
	.el-pagination {
		display: inline-block;
		box-sizing: border-box;
		width: 100%;
		text-align: right;
		padding: 1rem 0 0;
	}

	//样式调整
	.el-table {
		.dg-form-column__button{
			color: #1890ff;
		}
		.el-icon-circle-plus{
			font-size: 14px;
		}
	}
}




@include B(tpl) {
	@include e(default) {
		@include m(name) {
			display: inline-block;
			vertical-align: middle;
			margin: 0;
			color: #333333;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			// add author: tangdm descript: 媒体查询
			@include mq($large) {
				font-size: $dg--font-large;
			}
			@include mq($medium) {
				font-size: $dg--font-medium;
			}
			@include mq($small) {
				font-size: $dg--font-small;
			}
		}
	}

	@include e(status) {
		p {
			line-height: 1.5;
			@include mq($large) {
				font-size: $dg--font-large;
			}
			@include mq($medium) {
				font-size: $dg--font-medium;
			}
			@include mq($small) {
				font-size: $dg--font-small;
			}
		}
		@include m(name) {
			margin: 0;
		}

		@include m(status) {
			margin-right: 8px;
			// add author: tangdm
			@include mq($large) {
				font-size: 14px;
			}
			@include mq($medium) {
				font-size: 14px;
			}
			@include mq($small) {
				font-size: 12px;
			}
		}

		@include m(label) {
			color: $--color-text-primary;
			// add author: tangdm descript: 媒体查询
			@include mq($large) {
				font-size: $dg--font-large;
			}
			@include mq($medium) {
				font-size: $dg--font-medium;
			}
			@include mq($small) {
				font-size: $dg--font-small;
			}
		}
	}

	@include e(type) {
		display: inline-block;
		line-height: 18px;
		color: #fff;
		text-align: center;
		border-radius: 10px;
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		// add author: tangdm descript: 媒体查询
		@include mq($large) {
			font-size: $dg--font-large;
		}
		@include mq($medium) {
			font-size: $dg--font-medium;
		}
		@include mq($small) {
			font-size: $dg--font-small;
		}
	}

	@include e(operation) {
		@include mq($large) {
			height: $dg--font-large * 1.5;
		}
		@include mq($medium) {
			height: $dg--font-medium * 1.5;
		}
		@include mq($small) {
			height: $dg--font-small * 1.5;
		}
		line-height: 1.5;
		@include B(button) {
			position: relative;
			& + .dg-button {
				margin-left: 20px;
				&::after {
					content: "";
					position: absolute;
					top: 2px;
					left: -10px;
					width: 1px;
					height: 80%;
					background: #e8e8e8;
				}
			}
		}
	}
}







@include B(form-column) {
    @include e(button) {
        font-size: 14px;
        cursor: pointer;
    }
}
.dg-form-column__form-item--wrap.el-form-item {
    .el-form-item__error {
        position: relative;
        margin-bottom: 0px;
        text-align: left;
    }

    margin-bottom: 0;
}







@include B(upload) {
    .el-upload-list.el-upload-list--picture-card > li {
		display: inline-block;
		padding: $dg--upload-image-padding;
		border: $dg--upload-image-border;
		border-radius: $--border-radius-base;
        box-sizing: content-box;
        width: $--upload-avatar-size;
        height: $--upload-avatar-size;

    }
    .el-upload-list__item-name {
        color: $--color-text-primary;
        //> i:first-child {
        //    color: $--color-text-secondary;
        //}
    }
    .el-upload-list__item,
    .el-icon-close {
        color: $--color-text-secondary;
    }
    .dg-upload--text{
        color: $--color-text-regular;
    }
    @include e(dialog) {
        // 去掉 el-dialog 默认 width: 50%
        .el-dialog {
            display: inline-block;
            width: auto;
        }

        text-align: center;
    }

    @include e(img) {
        width: 100%;
        max-width: 500px; // 去掉这个就是查看原图
    }

    // 2 张的时候显示
    @include e(indicator) {
        list-style: none;
        text-align: center;
        position: static;
        transform: none;
        padding: 0;
		margin: 0;
        width: $--upload-avatar-size + 18;
        li {
            display: inline-block;
            padding: 4px;
            .el-carousel__button {
                background-color: #b2b2b2;
            }
        }
        .is-active .el-carousel__button {
            background: $--upload-active-color;
        }
        .el-carousel__button {
            width: 12px;
        }
    }

    // 3 张以上的时候
    @include e(indicator-more) {
        @include utils-user-select(none);
        box-sizing: border-box;
        text-align: center;
        padding: 4px;
        font-size: 14px;
        width: $--upload-avatar-size  + 18;
        i {
            color: #6e7a8a;
            font-weight: bold;
            margin: 0 5px;
            cursor: pointer;
            display: inline-block;
        }
        .is-active {
            color: $--upload-active-color;
        }
    }

    // 遮罩层
    @include e(shade) {
        display: none;
        position: absolute;
        border-radius: $--border-radius-base;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        cursor: default;
        text-align: center;
        opacity: 0;
        font-size: 20px;
        z-index: 2;
        color: #fff;
        background-color: rgba(0, 0, 0, 0.5);
        -webkit-transition: opacity 0.3s;
        transition: opacity 0.3s;
        text-align: center;
        &::after {
            display: inline-block;
            content: '';
            height: 100%;
            vertical-align: middle;
        }
        i {
            cursor: pointer;
            display: inline-block;
            line-height: inherit;
        }
        i + i {
            margin-left: 15px;
        }
    }

    // 走马灯容器
    @include e(carousel) {
        position: relative;
        box-sizing: border-box;
        border-radius: $--border-radius-base;
        width: $--upload-avatar-size;
        // background: $--upload-avatar-icon-color;
        &:hover {
            .dg-upload__shade {
                display: block;
                opacity: 1;
            }
        }
    }

    @include m(content) {
        @include when(disabled) {
            cursor: not-allowed;
            background-image: none;
            color: $--button-disabled-font-color;
            background-color: $--button-disabled-background-color;
            border-color: $--button-disabled-border-color;
        }
    }

    @include m(pictureList-box) {
        width: $--upload-avatar-size;
    }

    @include e(list) {
        & .el-upload.el-upload--text {
            display: none;
        }
    }

	@include e(image) {
		& .el-upload.el-upload--text {
			display: block;
			width: $--upload-avatar-size;
			height: $--upload-avatar-size;
		}
	}

    @include m(pictureList) {
        overflow: hidden;
        box-sizing: border-box;
        width: $--upload-avatar-size;
        height: $--upload-avatar-size;
        line-height: $--upload-avatar-size;
        border-radius: $--border-radius-base;
        border: $--upload-avatar-border;
        & i {
            font-size: 28px;
            font-weight: bold;
            color: $--upload-avatar-icon-color;
        }
    }

    @include m(button) {
        .el-button {
            border-color: $--upload-button-border-color;
            color: $--upload-button-color;
            &:hover,
            &:focus {
                background: none;
                color: $--color-primary;
                border-color: $--color-primary;
            }
        }
    }

    .avatar-uploader .el-upload {
        border-radius: $--border-radius-base;
        border: none;
        position: relative;
        cursor: pointer;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: $--color-primary;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        font-weight: bold;
        text-align: center;
        box-sizing: border-box;
        color: $--upload-avatar-icon-color;
        width: $--upload-avatar-size;
        height: $--upload-avatar-size;
        line-height: $--upload-avatar-size;
    }

    .avatar,
    .dg-upload-div {
        display: inline-block;
        width: $--upload-avatar-size;
        height: 100%;
    }

    .el-upload.el-upload--picture-card {
        overflow: hidden;
        width: $--upload-avatar-size + 16;
        height: $--upload-avatar-size + 16;
    }

    @include m(text) {
        margin: 15px 0;
        position: relative;
        line-height: normal !important;
        //color: $--upload-avatar-icon-color !important;
        color: $--color-text-secondary;
        bottom: #{$--upload-avatar-size / 2};
    }

	.el-button--small {
		padding: 8px 12px;
	}
}

.dg-upload__image,
.dg-upload__list {
    box-sizing: border-box;
	display: inline-block;
	padding: $dg--upload-image-padding;
    background: $--table-header-background-color;
	border: $dg--upload-image-border;
	border-radius: $--border-radius-base;
}




@include B(viewer) {
}

.viewer-zoom-in::before,
.viewer-zoom-out::before,
.viewer-one-to-one::before,
.viewer-reset::before,
.viewer-prev::before,
.viewer-play::before,
.viewer-next::before,
.viewer-rotate-left::before,
.viewer-rotate-right::before,
.viewer-flip-horizontal::before,
.viewer-flip-vertical::before,
.viewer-fullscreen::before,
.viewer-fullscreen-exit::before,
.viewer-close::before {
  background-image: url("");
  background-repeat: no-repeat;
  color: transparent;
  display: block;
  font-size: 0;
  height: 20px;
  line-height: 0;
  width: 20px;
}

.viewer-zoom-in::before {
  background-position: 0 0;
  content: "Zoom In";
}

.viewer-zoom-out::before {
  background-position: -20px 0;
  content: "Zoom Out";
}

.viewer-one-to-one::before {
  background-position: -40px 0;
  content: "One to One";
}

.viewer-reset::before {
  background-position: -60px 0;
  content: "Reset";
}

.viewer-prev::before {
  background-position: -80px 0;
  content: "Previous";
}

.viewer-play::before {
  background-position: -100px 0;
  content: "Play";
}

.viewer-next::before {
  background-position: -120px 0;
  content: "Next";
}

.viewer-rotate-left::before {
  background-position: -140px 0;
  content: "Rotate Left";
}

.viewer-rotate-right::before {
  background-position: -160px 0;
  content: "Rotate Right";
}

.viewer-flip-horizontal::before {
  background-position: -180px 0;
  content: "Flip Horizontal";
}

.viewer-flip-vertical::before {
  background-position: -200px 0;
  content: "Flip Vertical";
}

.viewer-fullscreen::before {
  background-position: -220px 0;
  content: "Enter Full Screen";
}

.viewer-fullscreen-exit::before {
  background-position: -240px 0;
  content: "Exit Full Screen";
}

.viewer-close::before {
  background-position: -260px 0;
  content: "Close";
}

.viewer-container {
  bottom: 0;
  direction: ltr;
  font-size: 0;
  left: 0;
  line-height: 0;
  overflow: hidden;
  position: absolute;
  right: 0;
  -webkit-tap-highlight-color: transparent;
  top: 0;
  -ms-touch-action: none;
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.viewer-container::selection,
.viewer-container *::selection {
  background-color: transparent;
}

.viewer-container img {
  display: block;
  height: auto;
  max-height: none !important;
  max-width: none !important;
  min-height: 0 !important;
  min-width: 0 !important;
  width: 100%;
}

.viewer-canvas {
  bottom: 0;
  left: 0;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 0;
}

.viewer-canvas > img {
  height: auto;
  margin: 15px auto;
  max-width: 90% !important;
  width: auto;
}

.viewer-footer {
  bottom: 0;
  left: 0;
  overflow: hidden;
  position: absolute;
  right: 0;
  text-align: center;
}

.viewer-navbar {
  background-color: rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.viewer-list {
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  height: 50px;
  margin: 0;
  overflow: hidden;
  padding: 1px 0;
}

.viewer-list > li {
  color: transparent;
  cursor: pointer;
  float: left;
  font-size: 0;
  height: 50px;
  line-height: 0;
  opacity: 0.5;
  overflow: hidden;
  -webkit-transition: opacity 0.15s;
  transition: opacity 0.15s;
  width: 30px;
}

.viewer-list > li:hover {
  opacity: 0.75;
}

.viewer-list > li + li {
  margin-left: 1px;
}

.viewer-list > .viewer-loading {
  position: relative;
}

.viewer-list > .viewer-loading::after {
  border-width: 2px;
  height: 20px;
  margin-left: -10px;
  margin-top: -10px;
  width: 20px;
}

.viewer-list > .viewer-active,
.viewer-list > .viewer-active:hover {
  opacity: 1;
}

.viewer-player {
  background-color: #000;
  bottom: 0;
  cursor: none;
  display: none;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  & > img {
    left: 0;
    position: absolute;
    top: 0;
  }
}

.viewer-toolbar > ul {
  display: inline-block;
  margin: 0 auto 5px;
  overflow: hidden;
  padding: 3px 0;
}

.viewer-toolbar > ul > li {
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  cursor: pointer;
  float: left;
  height: 24px;
  overflow: hidden;
  -webkit-transition: background-color 0.15s;
  transition: background-color 0.15s;
  width: 24px;
}

.viewer-toolbar > ul > li:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

.viewer-toolbar > ul > li::before {
  margin: 2px;
}

.viewer-toolbar > ul > li + li {
  margin-left: 1px;
}

.viewer-toolbar > ul > .viewer-small {
  height: 18px;
  margin-bottom: 3px;
  margin-top: 3px;
  width: 18px;
}

.viewer-toolbar > ul > .viewer-small::before {
  margin: -1px;
}

.viewer-toolbar > ul > .viewer-large {
  height: 30px;
  margin-bottom: -3px;
  margin-top: -3px;
  width: 30px;
}

.viewer-toolbar > ul > .viewer-large::before {
  margin: 5px;
}

.viewer-tooltip {
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 10px;
  color: #fff;
  display: none;
  font-size: 12px;
  height: 20px;
  left: 50%;
  line-height: 20px;
  margin-left: -25px;
  margin-top: -10px;
  position: absolute;
  text-align: center;
  top: 50%;
  width: 50px;
}

.viewer-title {
  color: #ccc;
  display: inline-block;
  font-size: 12px;
  line-height: 1;
  margin: 0 5% 5px;
  max-width: 90%;
  opacity: 0.8;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-transition: opacity 0.15s;
  transition: opacity 0.15s;
  white-space: nowrap;
}

.viewer-title:hover {
  opacity: 1;
}

.viewer-button {
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  cursor: pointer;
  height: 80px;
  overflow: hidden;
  position: absolute;
  right: -40px;
  top: -40px;
  -webkit-transition: background-color 0.15s;
  transition: background-color 0.15s;
  width: 80px;
}

.viewer-button:focus,
.viewer-button:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

.viewer-button::before {
  bottom: 15px;
  left: 15px;
  position: absolute;
}

.viewer-fixed {
  position: fixed;
}

.viewer-open {
  overflow: hidden;
}

.viewer-show {
  display: block;
}

.viewer-hide {
  display: none;
}

.viewer-backdrop {
  background-color: rgba(0, 0, 0, 0.5);
}

.viewer-invisible {
  visibility: hidden;
}

.viewer-move {
  cursor: move;
  cursor: -webkit-grab;
  cursor: grab;
}

.viewer-fade {
  opacity: 0;
}

.viewer-in {
  opacity: 1;
}

.viewer-transition {
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

@-webkit-keyframes viewer-spinner {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes viewer-spinner {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.viewer-loading::after {
  -webkit-animation: viewer-spinner 1s linear infinite;
  animation: viewer-spinner 1s linear infinite;
  border: 4px solid rgba(255, 255, 255, 0.1);
  border-left-color: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  content: "";
  display: inline-block;
  height: 40px;
  left: 50%;
  margin-left: -20px;
  margin-top: -20px;
  position: absolute;
  top: 50%;
  width: 40px;
  z-index: 1;
}

@media (max-width: 767px) {
  .viewer-hide-xs-down {
    display: none;
  }
}

@media (max-width: 991px) {
  .viewer-hide-sm-down {
    display: none;
  }
}

@media (max-width: 1199px) {
  .viewer-hide-md-down {
    display: none;
  }
}

.dg_viewer_item {
  display: inline-block;
  margin: 5px 5px 5px 0;

  img {
    width: $--upload-avatar-size;
    & + & {
      margin-left: 5px;
    }
  }
}




@include B(tree-select) {
    .el-input__inner {
        padding: 0 12px;

		// update author: tangdm [code] font-size: 14px;
		@include mq($large) {
			font-size: $dg--font-large;
		}
		@include mq($medium) {
			font-size: $dg--font-medium;
		}
		@include mq($small) {
			font-size: $dg--font-small;
		}
    }

    .el-select .el-tag__close.el-icon-close {
        background: transparent;
        color: $--tag-info-color;
        right: -3px;
        &:hover {
            background: transparent;
            color: $--color-text-regular;
        }
    }
}





@include b(form-item) {
    .el-select {
        width: 100%;
    }
	& ::placeholder {
		color: $--color-text-placeholder;
	}
}






@mixin colors($color) {
    color: $color;
}

@mixin borders($color) {
    border: 1px solid $color;
}

@include B(alert) {
    & .el-alert__content {
        .el-alert__description {
            color:  $dg--alert-description-font-color;
        }

        & .el-alert__title {
            color: $dg--alert-title-font-color;
        }
    }

    & .el-alert__icon {
		margin-top: 3px;
        margin-left: 8px;
        // 图标垂直居中对齐
        display: flex;
        //align-items: center;
		align-items: baseline;
    }

    &.el-alert--info {
        @include borders($dg--alert-info-border-color);
    }

    &.el-alert--success {
        @include borders($dg--alert-success-border-color);
    }

    &.el-alert--warning {
        @include borders($dg--alert-warning-border-color);
    }

    &.el-alert--error {
        @include borders($dg--alert-danger-border-color);
    }

    .el-icon-success:before {
        @include colors($--color-success);
    }

    .el-icon-info:before {
        @include colors($--color-primary);
    }

    .el-icon-warning:before {
        @include colors($--color-warning);
    }

    .el-icon-error:before {
        @include colors($--color-danger);
    }

    & .el-alert__title.is-bold {
		// update author: tangdm [code] font-size: $dg--alert-title-font-size;
		@include mq($large) {
			font-size: $dg--title-font-large;
		}
		@include mq($medium) {
			font-size: $dg--title-font-medium;
		}
		@include mq($small) {
			font-size: $dg--title-font-small;
		}
        //font-weight: normal;
    }

    & .el-alert__icon.is-big {
        margin-right: 8px;
        align-items: normal;

        &+.el-alert__content {
            line-height: 24px;
        }
    }

    // add author: tangdm
    @include e(box) {
        padding: 16px;
    }
}





@include B(tag) {
    // 原来 &.is-disabled 这里需要加权值
    &.el-tag.is-disabled {
        cursor: not-allowed;
        border: 1px solid $dg--tag-disabled-border;
        background: $dg--tag-disabled-background-color;
        color: $dg--tag-disabled-font-color;
        .el-tag__close {
            color: $dg--tag-disabled-font-color;
            &:hover {
                cursor: not-allowed;
                color: $dg--tag-disabled-font-color;
            }
        }
    }

    & + & {
        margin-left: 8px;
    }

    &:not(.is-border) + &:not(.is-border) {
        margin-left: 16px;
    }

    &:not(.is-border) {
        border-color: transparent;
        background-color: transparent;
    }

    &:not(.is-border).dg-tag--icon {
        padding: 0;
    }

    @include m(icon) {

        i {
            display: inline-block;
            text-align: center;
            margin-right: 5px;
        }
    }
}






// 这里待优化，sass版本3.2 lib不兼容嵌套
// $map-type: (
//         name: 'primary',
//         border: $--button-primary-border-color
//     ),
//     (
//         name: 'success',
//         border: $--button-success-border-color
//     ),
//     (
//         name: 'warning',
//         border: $--button-warning-border-color
//     ),
//     (
//         name: 'danger',
//         border: $--button-danger-border-color
//     ),
//     (
//         name: 'info',
//         border: $--button-info-border-color
//     );

// @each $name,$border in $map-type {
// 	.is-ghost.el--button--#{$name} {
// 		 @include colors($border);
// 	}
// }
@mixin button-ghost($color) {
    color: $color;
    border-color: $color;

    // delete author: tangdm descript: remove the focus status [code] &:focus
    &:hover {
        border-color: mix($--color-white, $color, $--button-hover-tint-percent);
        color: mix($--color-white, $color, $--button-hover-tint-percent);
    }

    &:active {
        border-color: mix($--color-black, $color, $--button-active-shade-percent);
        color: mix($--color-black, $color, $--button-active-shade-percent);
        outline: none;
    }

    &.is-active {
        border-color: mix($--color-black, $color, $--button-active-shade-percent);
        color: mix($--color-black, $color, $--button-active-shade-percent);
    }

    &.is-disabled {
        // delete author: tangdm descript: remove the focus status [code] &:focus
        &,
        &:hover,
        &:active {
            color: $--color-white;
            border-color: mix($color, $--color-white);
        }
    }
}

@mixin colors($border) {
    color: $border;
    border-color: $border;
}
@include B(button) {
    // 幽灵组件 background: transparent !important; color: xxx; border-color: xxx;

    @include when(ghost) {
        &.el-button {
            background: transparent !important;
            @include button-ghost(
                $--button-default-font-color
            );
        }

        &.el-button--primary {
            @include button-ghost(
                $--button-primary-border-color
            );
        }

        &.el-button--success {
            @include button-ghost(
                $--button-success-border-color
            );
        }

        &.el-button--warning {
            @include button-ghost(
                $--button-warning-border-color
            );
        }

        &.el-button--danger {
            @include button-ghost(
                $--button-danger-border-color
            );
        }
    }

    // 虚线 border-style: dashed;
    @include when(dashed) {
        border-style: dashed;
    }
}








@include B(dialog) {
    @include m(vertical) {
        // margin: 0 auto;
        // top: 50%;
        // transform: translateY(-50%)
    }

    @include e(header) {
		line-height: $dg--dialog-header-line-height;
		border-bottom: 1px solid $dg--dialog-border-color;
		border-radius: 4px 4px 0 0;
		box-sizing: border-box;

		@include mq($large) {
			height: $dg--dialog-header-height-large;
			padding: $dg--dialog-header-padding-large;
		}
		@include mq($medium) {
			height: $dg--dialog-header-height-medium;
			padding: $dg--dialog-header-padding-medium;
		}
		@include mq($small) {
			height: $dg--dialog-header-height-small;
			padding: $dg--dialog-header-padding-small;
		}

		@include utils-ellipsis;

		&:focus,
		&:hover {
			.el-dialog__close {
                // delete author: tangdm [code]
                //opacity: .7;
                color: $--message-close-hover-color;
			}
		}
    }

	@include e(body) {
		min-height: 64px;
        @include mq($large) {
            padding: $dg--dialog-body-padding-large;
        }
        @include mq($medium) {
            padding: $dg--dialog-body-padding-medium;
        }
        @include mq($small) {
            padding: $dg--dialog-body-padding-small;
        }
	}

	@include e(footer) {
        @include mq($large) {
            padding: $dg--dialog-footer-padding-large;
        }
        @include mq($medium) {
            padding: $dg--dialog-footer-padding-medium;
        }
        @include mq($small) {
            padding: $dg--dialog-footer-padding-small;
        }
		border-top: 1px solid $dg--dialog-border-color;
	}
}

/* layer Component
-------------------------- */
.layui-layer {
	font-size: 14px;
	background: $--dialog-background-color;
	&-title {
        font-weight: bold;
		line-height: $dg--dialog-header-line-height;
		color: $dg--dialog-title-color;
		border-bottom: 1px solid $dg--dialog-border-color;
		border-radius: 4px 4px 0 0;
        box-sizing: border-box;

        @include mq($large) {
            font-size: $dg--title-font-large;
            height: $dg--dialog-header-height-large;
			padding: 0 48px 0 2*$dg--dialog-header-padding-top-large;
			line-height: $dg--dialog-header-height-large;
			// text-indent: $dg--dialog-header-padding-top-large;
        }
        @include mq($medium) {
            font-size: $dg--title-font-medium;
			height: $dg--dialog-header-height-medium;
			padding: 0 48px 0 2*$dg--dialog-header-padding-top-medium;
			line-height: $dg--dialog-header-height-medium;
			// text-indent: $dg--dialog-header-padding-top-medium;
           
        }
        @include mq($small) {
            font-size: $dg--title-font-small;
            height: $dg--dialog-header-height-small;
			padding: $dg--dialog-header-padding-small;
			line-height: 0 48px 0 2*$dg--dialog-header-padding-top-small;
			// text-indent: $dg--dialog-header-padding-top-small;
        }
		@include utils-ellipsis;
	}
	&-content {
        @include mq($large) {
            padding: $dg--dialog-body-padding-large;
        }
        @include mq($medium) {
            padding: $dg--dialog-body-padding-medium;
        }
        @include mq($small) {
            padding: $dg--dialog-body-padding-small;
        }
		box-sizing: border-box;
	}
	&-btn {
        @include mq($large) {
            padding: $dg--dialog-footer-padding-large;
        }
        @include mq($medium) {
            padding: $dg--dialog-footer-padding-medium;
        }
        @include mq($small) {
            padding: $dg--dialog-footer-padding-small;
        }
		border-top: 1px solid $dg--dialog-border-color;
		background: $--dialog-background-color;
		text-align: right;
		pointer-events: auto;
		user-select: none;
		-webkit-user-select: none;
		a {
            display: inline-block;
            line-height: 1;
            box-sizing: border-box;
            text-align: center;
            @include mq($large) {
                min-width: $dg--button-small-min-width;
                height: $dg--button-media-large-height;
                padding: $dg--button-large-padding-vertical $dg--rem-large;
            }
            @include mq($medium) {
                min-width: $dg--button-small-min-width - 12;
                height: $dg--button-media-medium-height;
                padding: $dg--button-medium-padding-vertical $dg--rem-medium;
            }
            @include mq($small) {
                min-width: $dg--button-small-min-width - 24;
                height: $dg--button-media-small-height;
                padding: $dg--button-medium-padding-vertical - 2 $dg--rem-small;
            }
            margin: 0;
            border: $--border-base;
            border-color: $--button-default-border-color;
            background: $--button-default-background-color;
			color: $--message-close-icon-color;
			border-radius: 2px;
			font-weight: 400;
			cursor: pointer;
			text-decoration: none;
			&:hover,
            &:focus {
                color: $--color-primary;
                border-color: $--color-primary-light-7;
                background-color: $--color-primary-light-9;
			}
		}
        a + a {
            margin-left: .5rem;
        }
		.layui-layer-btn0 {
            @include button-variant(
                $--button-primary-font-color,
                $--button-primary-background-color,
                $--button-primary-border-color
            );
		}
		&-l {
			text-align: left;
		}
		&-c {
			text-align: center;
		}
	}
	&-setwin {
		position: absolute;
        @include mq($large) {
            top: $dg--dialog-header-padding-top-large;
			right: 2 * $dg--rem-large;
        }
        @include mq($medium) {
            top: $dg--dialog-header-padding-top-medium;
			right: 2 * $dg--rem-medium;
        }
        @include mq($small) {
            top: $dg--dialog-header-padding-top-small;
			right: 2 * $dg--rem-small;
        }
		font-size: 0;
		line-height: initial;
		.layui-layer-min {
			cite {
				background-color: $--message-close-icon-color;
			}
			&:hover cite {
                // delete author: tangdm [code]
                //opacity: .7;

                color: $--message-close-hover-color;
			}
		}
		a {
			position: relative;
            display: inline-block;
			width: 16px;
			height: 16px;
			margin-left: 10px;
			font-size: 16px;
			color: $--message-close-icon-color;
			_overflow: hidden;

			&:hover {
				opacity: .7;
			}
		}
		.layui-layer-ico {
			background: none;
		}
	}
}

/**

 @Name: layer
 @Author: 贤心

 **/

/* *html{background-image: url(about:blank); background-attachment: fixed;} */
html #layuicss-layer {
	display: none;
	position: absolute;
	width: 1989px;
}

/* common */
.layui-layer-shade,
.layui-layer {
	position: fixed;
	_position: absolute;
	pointer-events: auto;
}
.layui-layer-shade {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	_height: expression(document.body.offsetHeight + "px");
}
.layui-layer {
	-webkit-overflow-scrolling: touch;
}
.layui-layer {
	top: 150px;
	left: 0;
	margin: 0;
	padding: 0;
	-webkit-background-clip: content;
	border-radius: 2px;
	box-shadow: 1px 1px 50px rgba(0, 0, 0, 0.3);
}
.layui-layer-close {
	position: absolute;
}
.layui-layer-content {
	position: relative;
    min-height: 64px;
}
.layui-layer-border {
	border: 1px solid #b2b2b2;
	border: 1px solid rgba(0, 0, 0, 0.1);
	box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}
.layui-layer-load {
	background: url() #eee center center no-repeat;
}
.layui-layer-ico {
	background: url() no-repeat;
}

.layui-layer-move {
	display: none;
	position: fixed;
	*position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	cursor: move;
	opacity: 0;
	filter: alpha(opacity=0);
	background-color: #fff;
	z-index: 2147483647;
}
.layui-layer-resize {
	position: absolute;
	width: 15px;
	height: 15px;
	right: 0;
	bottom: 0;
	cursor: se-resize;
}

/* 动画 */
.layer-anim {
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-duration: 0.3s;
	animation-duration: 0.3s;
}

@-webkit-keyframes layer-bounceIn {
	/* 默认 */
	0% {
		opacity: 0;
		-webkit-transform: scale(0.5);
		transform: scale(0.5);
	}
	100% {
		opacity: 1;
		-webkit-transform: scale(1);
		transform: scale(1);
	}
}
@keyframes layer-bounceIn {
	0% {
		opacity: 0;
		-webkit-transform: scale(0.5);
		-ms-transform: scale(0.5);
		transform: scale(0.5);
	}
	100% {
		opacity: 1;
		-webkit-transform: scale(1);
		-ms-transform: scale(1);
		transform: scale(1);
	}
}
.layer-anim-00 {
	-webkit-animation-name: layer-bounceIn;
	animation-name: layer-bounceIn;
}

@-webkit-keyframes layer-zoomInDown {
	0% {
		opacity: 0;
		-webkit-transform: scale(0.1) translateY(-2000px);
		transform: scale(0.1) translateY(-2000px);
		-webkit-animation-timing-function: ease-in-out;
		animation-timing-function: ease-in-out;
	}
	60% {
		opacity: 1;
		-webkit-transform: scale(0.475) translateY(60px);
		transform: scale(0.475) translateY(60px);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}
}
@keyframes layer-zoomInDown {
	0% {
		opacity: 0;
		-webkit-transform: scale(0.1) translateY(-2000px);
		-ms-transform: scale(0.1) translateY(-2000px);
		transform: scale(0.1) translateY(-2000px);
		-webkit-animation-timing-function: ease-in-out;
		animation-timing-function: ease-in-out;
	}
	60% {
		opacity: 1;
		-webkit-transform: scale(0.475) translateY(60px);
		-ms-transform: scale(0.475) translateY(60px);
		transform: scale(0.475) translateY(60px);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}
}
.layer-anim-01 {
	-webkit-animation-name: layer-zoomInDown;
	animation-name: layer-zoomInDown;
}

@-webkit-keyframes layer-fadeInUpBig {
	0% {
		opacity: 0;
		-webkit-transform: translateY(2000px);
		transform: translateY(2000px);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
}
@keyframes layer-fadeInUpBig {
	0% {
		opacity: 0;
		-webkit-transform: translateY(2000px);
		-ms-transform: translateY(2000px);
		transform: translateY(2000px);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
		transform: translateY(0);
	}
}
.layer-anim-02 {
	-webkit-animation-name: layer-fadeInUpBig;
	animation-name: layer-fadeInUpBig;
}

@-webkit-keyframes layer-zoomInLeft {
	0% {
		opacity: 0;
		-webkit-transform: scale(0.1) translateX(-2000px);
		transform: scale(0.1) translateX(-2000px);
		-webkit-animation-timing-function: ease-in-out;
		animation-timing-function: ease-in-out;
	}
	60% {
		opacity: 1;
		-webkit-transform: scale(0.475) translateX(48px);
		transform: scale(0.475) translateX(48px);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}
}
@keyframes layer-zoomInLeft {
	0% {
		opacity: 0;
		-webkit-transform: scale(0.1) translateX(-2000px);
		-ms-transform: scale(0.1) translateX(-2000px);
		transform: scale(0.1) translateX(-2000px);
		-webkit-animation-timing-function: ease-in-out;
		animation-timing-function: ease-in-out;
	}
	60% {
		opacity: 1;
		-webkit-transform: scale(0.475) translateX(48px);
		-ms-transform: scale(0.475) translateX(48px);
		transform: scale(0.475) translateX(48px);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}
}
.layer-anim-03 {
	-webkit-animation-name: layer-zoomInLeft;
	animation-name: layer-zoomInLeft;
}

@-webkit-keyframes layer-rollIn {
	0% {
		opacity: 0;
		-webkit-transform: translateX(-100%) rotate(-120deg);
		transform: translateX(-100%) rotate(-120deg);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateX(0px) rotate(0deg);
		transform: translateX(0px) rotate(0deg);
	}
}
@keyframes layer-rollIn {
	0% {
		opacity: 0;
		-webkit-transform: translateX(-100%) rotate(-120deg);
		-ms-transform: translateX(-100%) rotate(-120deg);
		transform: translateX(-100%) rotate(-120deg);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateX(0px) rotate(0deg);
		-ms-transform: translateX(0px) rotate(0deg);
		transform: translateX(0px) rotate(0deg);
	}
}
.layer-anim-04 {
	-webkit-animation-name: layer-rollIn;
	animation-name: layer-rollIn;
}

@keyframes layer-fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
.layer-anim-05 {
	-webkit-animation-name: layer-fadeIn;
	animation-name: layer-fadeIn;
}

@-webkit-keyframes layer-shake {
	0%,
	100% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
	10%,
	30%,
	50%,
	70%,
	90% {
		-webkit-transform: translateX(-10px);
		transform: translateX(-10px);
	}
	20%,
	40%,
	60%,
	80% {
		-webkit-transform: translateX(10px);
		transform: translateX(10px);
	}
}
@keyframes layer-shake {
	0%,
	100% {
		-webkit-transform: translateX(0);
		-ms-transform: translateX(0);
		transform: translateX(0);
	}
	10%,
	30%,
	50%,
	70%,
	90% {
		-webkit-transform: translateX(-10px);
		-ms-transform: translateX(-10px);
		transform: translateX(-10px);
	}
	20%,
	40%,
	60%,
	80% {
		-webkit-transform: translateX(10px);
		-ms-transform: translateX(10px);
		transform: translateX(10px);
	}
}
.layer-anim-06 {
	-webkit-animation-name: layer-shake;
	animation-name: layer-shake;
}
@-webkit-keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

/* 标题栏 */
.layui-layer-setwin .layui-layer-min cite {
	position: absolute;
	width: 12px;
	height: 1px;
	left: 0;
	top: 56%;
	// delete author: tangdm [code]
	//margin-top: -1px;
	background-color: $--message-close-icon-color;
	cursor: pointer;
	_overflow: hidden;
}
.layui-layer-setwin .layui-layer-max {
	background-position: -32px -40px;
}
.layui-layer-setwin .layui-layer-max:hover {
	background-position: -16px -40px;
}
.layui-layer-setwin .layui-layer-maxmin {
	background-position: -65px -40px;
}
.layui-layer-setwin .layui-layer-maxmin:hover {
	background-position: -49px -40px;
}
.layui-layer-setwin .layui-layer-close1 {
	background-position: 1px -40px;
	cursor: pointer;

    // create author: tangdm
    padding-top: 4px;
}
.layui-layer-setwin .layui-layer-close1:hover {
	// delete author: tangdm [code]
    //opacity: 0.7;

    color: $--message-close-hover-color;
}
.layui-layer-setwin .layui-layer-close2 {
	position: absolute;
	right: -28px;
	top: -28px;
	width: 30px;
	height: 30px;
	margin-left: 0;
	background-position: -149px -31px;
	*right: -18px;
	_display: none;
}
.layui-layer-setwin .layui-layer-close2:hover {
	background-position: -180px -31px;
}

/* 按钮栏 */


/* 定制化 */
.layui-layer-dialog {
	min-width: 260px;
}
.layui-layer-dialog .layui-layer-content {
	position: relative;
	padding: 20px;
	line-height: 24px;
	word-break: break-all;
	overflow: hidden;
	font-size: 14px;
	overflow-x: hidden;
	overflow-y: auto;
}
.layui-layer-dialog .layui-layer-content .layui-layer-ico {
	position: absolute;
	top: 16px;
	left: 15px;
	_left: -40px;
	width: 30px;
	height: 30px;
}
.layui-layer-ico1 {
	background-position: -30px 0;
}
.layui-layer-ico2 {
	background-position: -60px 0;
}
.layui-layer-ico3 {
	background-position: -90px 0;
}
.layui-layer-ico4 {
	background-position: -120px 0;
}
.layui-layer-ico5 {
	background-position: -150px 0;
}
.layui-layer-ico6 {
	background-position: -180px 0;
}
.layui-layer-rim {
	border: 6px solid #8d8d8d;
	border: 6px solid rgba(0, 0, 0, 0.3);
	border-radius: 5px;
	box-shadow: none;
}
.layui-layer-msg {
	min-width: 180px;
	border: 1px solid #d3d4d3;
	box-shadow: none;
}
.layui-layer-hui {
	min-width: 100px;
	background-color: #000;
	filter: alpha(opacity=60);
	background-color: rgba(0, 0, 0, 0.6);
	color: #fff;
	border: none;
}
.layui-layer-hui .layui-layer-content {
	padding: 12px 25px;
	text-align: center;
}
.layui-layer-dialog .layui-layer-padding {
	padding: 20px 20px 20px 55px;
	text-align: left;
}
.layui-layer-page .layui-layer-content {
	position: relative;
	overflow: auto;
}
.layui-layer-nobg {
	background: none;
}
.layui-layer-iframe iframe {
	display: block;
	width: 100%;
}

.layui-layer-loading {
	border-radius: 100%;
	background: none;
	box-shadow: none;
	border: none;
}
.layui-layer-loading .layui-layer-content {
	width: 60px;
	height: 24px;
	background: url() no-repeat;
}
.layui-layer-loading .layui-layer-loading1 {
	width: 37px;
	height: 37px;
	background: url() no-repeat;
}
.layui-layer-loading .layui-layer-loading2,
.layui-layer-ico16 {
	width: 32px;
	height: 32px;
	background: url() no-repeat;
}
.layui-layer-tips {
	background: none;
	box-shadow: none;
	border: none;
}
.layui-layer-tips .layui-layer-content {
	position: relative;
	line-height: 22px;
	min-width: 12px;
	padding: 8px 15px;
	font-size: 12px;
	_float: left;
	border-radius: 2px;
	box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
	background-color: #000;
	color: #fff;
}
.layui-layer-tips .layui-layer-close {
	right: -2px;
	top: -1px;
}
.layui-layer-tips i.layui-layer-TipsG {
	position: absolute;
	width: 0;
	height: 0;
	border-width: 8px;
	border-color: transparent;
	border-style: dashed;
	*overflow: hidden;
}
.layui-layer-tips i.layui-layer-TipsT,
.layui-layer-tips i.layui-layer-TipsB {
	left: 5px;
	border-right-style: solid;
	border-right-color: #000;
}
.layui-layer-tips i.layui-layer-TipsT {
	bottom: -8px;
}
.layui-layer-tips i.layui-layer-TipsB {
	top: -8px;
}
.layui-layer-tips i.layui-layer-TipsR,
.layui-layer-tips i.layui-layer-TipsL {
	top: 5px;
	border-bottom-style: solid;
	border-bottom-color: #000;
}
.layui-layer-tips i.layui-layer-TipsR {
	left: -8px;
}
.layui-layer-tips i.layui-layer-TipsL {
	right: -8px;
}

/* skin */
.layui-layer-lan[type="dialog"] {
	min-width: 280px;
}
.layui-layer-lan .layui-layer-title {
	background: #4476a7;
	color: #fff;
	border: none;
}
.layui-layer-lan .layui-layer-btn {
	padding: 5px 10px 10px;
	text-align: right;
	border-top: 1px solid #e9e7e7;
}
.layui-layer-lan .layui-layer-btn a {
	background: #fff;
	border-color: #e9e7e7;
	color: #333;
}
.layui-layer-lan .layui-layer-btn .layui-layer-btn1 {
	background: #c9c5c5;
}
.layui-layer-molv .layui-layer-title {
	background: #009f95;
	color: #fff;
	border: none;
}
.layui-layer-molv .layui-layer-btn a {
	background: #009f95;
	border-color: #009f95;
}
.layui-layer-molv .layui-layer-btn .layui-layer-btn1 {
	background: #92b8b1;
}

/**

 @Name: layer拓展样式

 */

.layui-layer-iconext {
	background: url() no-repeat;
}

/* prompt模式 */
.layui-layer-prompt .layui-layer-input {
	display: block;
	width: 230px;
	height: 36px;
	margin: 0 auto;
	line-height: 30px;
	padding-left: 10px;
	border: 1px solid #e6e6e6;
	color: #333;
}
.layui-layer-prompt textarea.layui-layer-input {
	width: 300px;
	height: 100px;
	line-height: 20px;
	padding: 6px 10px;
}
.layui-layer-prompt .layui-layer-content {
	padding: 20px;
}
.layui-layer-prompt .layui-layer-btn {
	padding-top: 0;
}

/* tab模式 */
.layui-layer-tab {
	box-shadow: 1px 1px 50px rgba(0, 0, 0, 0.4);
}
.layui-layer-tab .layui-layer-title {
	padding-left: 0;
	overflow: visible;
}
.layui-layer-tab .layui-layer-title span {
	position: relative;
	float: left;
	min-width: 80px;
	max-width: 260px;
	padding: 0 20px;
	text-align: center;
	cursor: default;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	cursor: pointer;
}
.layui-layer-tab .layui-layer-title span.layui-this {
	height: 43px;
	border-left: 1px solid #eee;
	border-right: 1px solid #eee;
	background-color: #fff;
	z-index: 10;
}
.layui-layer-tab .layui-layer-title span:first-child {
	border-left: none;
}
.layui-layer-tabmain {
	line-height: 24px;
	clear: both;
}
.layui-layer-tabmain .layui-layer-tabli {
	display: none;
}
.layui-layer-tabmain .layui-layer-tabli.layui-this {
	display: block;
}

/* photo模式 */
.layui-layer-photos {
	-webkit-animation-duration: 0.8s;
	animation-duration: 0.8s;
}
.layui-layer-photos .layui-layer-content {
	overflow: hidden;
	text-align: center;
}
.layui-layer-photos .layui-layer-phimg img {
	position: relative;
	width: 100%;
	display: inline-block;
	*display: inline;
	*zoom: 1;
	vertical-align: top;
}
.layui-layer-imguide,
.layui-layer-imgbar {
	display: none;
}
.layui-layer-imgprev,
.layui-layer-imgnext {
	position: absolute;
	top: 50%;
	width: 27px;
	_width: 44px;
	height: 44px;
	margin-top: -22px;
	outline: none;
	blr: expression(this.onFocus=this.blur());
}
.layui-layer-imgprev {
	left: 10px;
	background-position: -5px -5px;
	_background-position: -70px -5px;
}
.layui-layer-imgprev:hover {
	background-position: -33px -5px;
	_background-position: -120px -5px;
}
.layui-layer-imgnext {
	right: 10px;
	_right: 8px;
	background-position: -5px -50px;
	_background-position: -70px -50px;
}
.layui-layer-imgnext:hover {
	background-position: -33px -50px;
	_background-position: -120px -50px;
}
.layui-layer-imgbar {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 32px;
	line-height: 32px;
	background-color: rgba(0, 0, 0, 0.8);
	background-color: #000\9;
	filter: Alpha(opacity=80);
	color: #fff;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	font-size: 0;
}
.layui-layer-imgtit {
	/*position:absolute; left:20px;*/
}
.layui-layer-imgtit * {
	display: inline-block;
	*display: inline;
	*zoom: 1;
	vertical-align: top;
	font-size: 12px;
}
.layui-layer-imgtit a {
	max-width: 65%;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	color: #fff;
}
.layui-layer-imgtit a:hover {
	color: #fff;
	text-decoration: underline;
}
.layui-layer-imgtit em {
	padding-left: 10px;
	font-style: normal;
}

/* 关闭动画 */
@-webkit-keyframes layer-bounceOut {
	100% {
		opacity: 0;
		-webkit-transform: scale(0.7);
		transform: scale(0.7);
	}
	30% {
		-webkit-transform: scale(1.05);
		transform: scale(1.05);
	}
	0% {
		-webkit-transform: scale(1);
		transform: scale(1);
	}
}
@keyframes layer-bounceOut {
	100% {
		opacity: 0;
		-webkit-transform: scale(0.7);
		-ms-transform: scale(0.7);
		transform: scale(0.7);
	}
	30% {
		-webkit-transform: scale(1.05);
		-ms-transform: scale(1.05);
		transform: scale(1.05);
	}
	0% {
		-webkit-transform: scale(1);
		-ms-transform: scale(1);
		transform: scale(1);
	}
}
.layer-anim-close {
	-webkit-animation-name: layer-bounceOut;
	animation-name: layer-bounceOut;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-duration: 0.2s;
	animation-duration: 0.2s;
}

@media screen and (max-width: 1100px) {
	.layui-layer-iframe {
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
}





// @import 'element-scss/input';
// @import 'element-scss/button';


@include B(message-box) {
    width: $--msgbox-width;
    padding: $dg--message-box-pad;

    @include e(title) {
        .el-message-box__status {
            position: relative;
            top: auto;
            transform: inherit;
            display: inline-block;
            vertical-align: middle;
			margin-right: 16px;
            margin-top: -2px;
        }
    }

    @include e(name) {
        display: inline-block;
        vertical-align: middle;

        &.is-icon {
            margin-left: 16px;
        }
    }

    @include e(content) {
        color: $--messagebox-content-color;
        font-size: $dg--message-box__content-font;

        &.is-icon {
            //padding: $dg--message-box__content-icon-padding;
            @include mq($large) {
                padding: $dg--rem-large 2 * $dg--rem-large;
                padding-left: 2 * $dg--rem-large + 41;
            }
            @include mq($medium) {
                padding: $dg--rem-medium 2 * $dg--rem-medium;
                padding-left: 2 * $dg--rem-medium + 41;
            }
            @include mq($small) {
                padding: $dg--rem-small 2 * $dg--rem-small;
                padding-left: 2 * $dg--rem-small + 41;
            }
        }
    }

}




@include B(table-select) {
    @include e(scrollbar) {
        .dg-select-dropdown__item:hover > td {
            background-color: initial !important;
        }

        .dg-select-dropdown__list {
            padding: 12px;
        }

        &.multiple {
            .dg-select-dropdown__item > td:last-child > .cell {
                padding-right: 30px;
            }
        }
    }
}









@include B(date-picker) {
    display: flex;
    align-items: center;

    @include e(short-btn) {
        .dg-radio-group {
            margin-right: 10px;
        }
    }
    .dg-range-editor {
        display: flex;
        align-items: center;
        .el-range-separator {
            line-height: inherit;
        }
    }
    .dg-select{
        width: 120px;
        margin-right: 20px;
    }
}







@include B(time-picker) {
    display: flex;
    @include e(btn--visible) {
        .dg-radio-group {
            margin-right: 10px;
        }
    }
    @include e(separator) {
        display: inline-block;
        padding: 0 5px;
        margin: 0;
    }
}




@include B(log-search) {
    width: 100%;
    height: 100%;
    @include e(content) {
        width: 100%;
        height: 100%;
        background: #333;
        color: #f2f2f2;
    }
    @include e(item) {
        > p {
            margin: 0;
            color: #f2f2f2;
        }
    }
    @include e(light) {
        background: #ffff00;
        color: #333;
    }
}




@include B(time-line) {
	position: relative;
	width: 100%;
	height: 100%;
	padding: $dg--time-line-padding;
	box-sizing: border-box;
	.el-pagination span:not([class*='suffix']),
	.dg-time-line__message-title{
		@include mq($large) {
			font-size: $dg--font-large;
		}
		@include mq($medium) {
			font-size: $dg--font-medium;
		}
		@include mq($small) {
			font-size: $dg--font-small;
		}
	}
	@include e(inner) {
		width: 100%;
		height: 100%;
		&.is-pagination {
			height: calc(100% - 52px);
		}
	}
	@include e(content) {
		box-sizing: border-box;
		width: 100%;
		list-style: none;
		margin: 0;
		padding: 0;
	}
	@include e(dot) {
		position: absolute;
		top: 5px;
		left: 0;
		z-index: 2;
		width: $dg--time-line-dot-size;
		height: $dg--time-line-dot-size;
		border-radius: 50%;
		line-height: 10px;
		text-align: center;
		border: $dg--time-line-dot-width solid $dg--time-line-line-color;
		background-color: white;
		i {
			line-height: 20px;
		}
	}
	@include e(line) {
		position: absolute;
		top: $dg--time-line-dot-size + $dg--time-line-dot-width*2 + 5;
		left: ($dg--time-line-dot-size - $dg--time-line-line-width + $dg--time-line-dot-width*2 ) / 2;
		width: $dg--time-line-line-width;
		height: 100%;
		background-color: $dg--time-line-line-color;
		z-index: 1;
	}
	@include e(item) {
		position: relative;
		list-style: none;
	}
	@include e(document) {
		width: 100%;
		padding-left: $dg--time-line-dot-size + $dg--time-line-dot-width*2 + 8;
		padding-bottom: 12px;
		box-sizing: border-box;
        p {
            font-size: 14px;
            line-height: 1.5;
            color: $--color-text-primary;
			margin: 4px 0;
            @include mq($small) {
                font-size: $dg--font-small;
            }
        }
	}
	@include e(box) {
		&-base {
			display: block;
			color: $--color-text-primary;
			line-height: 21px;
		}
		&-title {
			display: inline-block;
			vertical-align: top;
			font-size: $dg--font-medium;
			@include mq($small) {
				font-size: $dg--font-small;
			}
		}
		&-time {
			color: $--color-text-regular;
			font-size: $dg--font-medium;
			@include mq($small) {
				font-size: $dg--font-small;
			}
		}
	}
	@include e(message) {
		padding: 5px 15px;
		margin-right: 20px;
		background: #ffffff;
		border: 1px solid $dg--time-line-message-border-color;
		-webkit-box-shadow: $dg--time-line-message-box-shadow;
		-moz-box-shadow: $dg--time-line-message-box-shadow;
		box-shadow: $dg--time-line-message-box-shadow;
		&-title {
			margin-top: 5px;
			color: $--color-text-primary;
			font-size: 14px;
			@include mq($small) {
				font-size: $dg--font-small;
			}
		}
		&-info {
			display: block;
			padding: 3px 0;
			color: $--color-text-secondary;
			font-size: 14px;
            @include mq($small) {
                font-size: $dg--font-small;
            }
		}
	}
	@include e(pagination) {
		padding: 10px 0;
	}
	//自定义图表
	@include e(item-icon) {
		& .dg-time-line__dot {
			width: $dg--time-line-icon-size;
			height: $dg--time-line-icon-size;
			top: 2px;
			left: -($dg--time-line-icon-size - $dg--time-line-dot-size) / 2;
			& i{
				line-height: $dg--time-line-icon-size;
				display: flex;
				align-items: center;
				font-weight: 600;
				justify-content: center;
			}
		}

		& .dg-time-line__document{
			padding-left: $dg--time-line-icon-size + $dg--time-line-dot-width*2 + 8;
		}
	}

	//没有边框
	& .dg-time-line__no-border {
		& .dg-time-line__dot {
			border-width: 0;
			left:$dg--time-line-dot-width/2;
		}
	}

	& .dg-time-line__content-icon {
		padding-left: ($dg--time-line-icon-size - $dg--time-line-dot-size) / 2;
	}

	& .line-background-color {
		background-color: $dg--time-line-line-color;
	}

	//时间轴左右两侧摆放
	@include e(both){
      & .dg-time-line__item {
		  width: 50%;
		  left: 50%;
		  margin-left: -($dg--time-line-dot-size + $dg--time-line-dot-width*2)/2;
		  &:nth-child(even) {
			  left:auto;
			  margin-left: 0px;
			  text-align: right;
			  right: -($dg--time-line-dot-size + $dg--time-line-dot-width*2)/2;
			  & .dg-time-line__line {
				right: ($dg--time-line-dot-size + $dg--time-line-dot-width*2 - $dg--time-line-line-width)/2;
				left: auto;
			  }
			  & .dg-time-line__dot {
				  right:0px;
				  left: auto;
			  }
			  & .dg-time-line__document {
				  padding-right: $dg--time-line-dot-size + $dg--time-line-dot-width*2 + 8;
				  padding-left: 0px;
			  }
			  &.dg-time-line__item-icon {
				  & .dg-time-line__dot {
					  right: -($dg--time-line-icon-size - $dg--time-line-dot-size) / 2;
				  }

				  &.dg-time-line__no-border{
					  & .dg-time-line__dot {
						  right: -($dg--time-line-icon-size - $dg--time-line-dot-size) / 2 + $dg--time-line-dot-width;
					  }
				  }
			  }
		  }
	  }

	}
}




@include b(line-table) {
}




@include b(line-column) {
}




@include B(page-code) {
	display: flex;
	width: $dg--page-code-width;
	height: $dg--page-code-height;
	margin: 0 auto;
	@include e(picture) {
		width: $dg--page-code-picture-width;
		height: $dg--page-code-picture-height;
		background-size: cover;

		@include m(404) {
			background: url("#{$dg--image-path}/pictures/picture_404.png");
		}

		@include m(403) {
			background: url("#{$dg--image-path}/pictures/picture_403.png");
		}

		@include m(500) {
			background: url("#{$dg--image-path}/pictures/picture_500.png");
		}

		@include m(501) {
			background: url("#{$dg--image-path}/pictures/picture_501.png");
		}
	}
	@include e(box) {
		padding: $dg--page-code-box-padding;
		box-sizing: border-box;
	}

	@include e(msg) {
		margin: $dg--page-code-msg-margin;
		padding-left: $dg--page-code-msg-padding-left;
		list-style-image: url("#{$dg--image-path}/pictures/icon_dot.png");
		li {
			margin: $dg--page-code-msg-li-margin;
			padding-left: 8px;
			font-size: $--font-size-base;
			color: $--color-text-secondary;
		}
	}

	@include e(option) {
		margin: $dg--page-code-msg-margin;
		padding-left: $dg--page-code-msg-padding-left;
		list-style-image: url("#{$dg--image-path}/pictures/icon_play.png");
		li {
			margin: $dg--page-code-msg-li-margin;
			padding-left: 8px;
			font-size: $--font-size-base;
			color: $--color-primary;
		}
	}

	@include e(link) {
		font-size: $--font-size-base;
		color: $--color-primary;
	}

	@include e(title) {
		font-size: $dg--page-code-title-font-size;
		font-weight: bold;
		line-height: $dg--page-code-title-line-height;
		color: $--color-text-primary;
	}
	@include e(en) {
		font-size: $--font-size-base;
		color: $--color-text-regular;
		line-height: $dg--page-code-en-line-height;
		padding-top: 6px;
		margin: 0;
	}
	@include e(tip) {
		color: $--color-text-primary;
		font-size: $--font-size-base;
	}
}






@include B(switch) {
	@include e(active) {
		@include m(icon) {
			display: inline-block;
			margin: 0 3px 0 6px;
			width: 12px;
			font-size: 12px;
			text-align: center;
			color: $--color-white;
			transition: all .3s linear;
			opacity: 0;
			&.is-active {
				opacity: 1;
			}
		}
	}
	@include e(inactive) {
		@include m(icon) {
			display: inline-block;
			width: 12px;
			font-size: 12px;
			text-align: center;
			color: $--color-white;
			transition: all .3s linear;
			opacity: 0;
			&.is-active {
				opacity: 1;
			}
		}
	}
}





@include B(card) {
}



@include B(calendar) {
    &__title {
        width: 100%;
        text-align: center;
    }
    &__btn {
        font-size: 16px;
        color: $--color-text-primary;
        border: 0;
        background: transparent;
        cursor: pointer;
        outline: none;
        &.is-left {
            float: left;
        }
        &.is-right {
            float: right;
        }
    }
    &__time {
        position: absolute;
        top: 6px;
        left: 6px;
    }
    &__legends {
        display: inline-block;
        width: 100%;
        text-align: center;
        padding: 0;
    }
    &__legend {
        display: inline-block;
        padding: 0 6px;
        cursor: pointer;
        i {
            display: inline-block;
            vertical-align: middle;
            width: 18px;
            height: 12px;
            border-radius: 2px;
        }
        span {
            display: inline-block;
            vertical-align: middle;
            margin-left: 4px;
        }
    }
}

.el-calendar-table .el-calendar-day {
    position: relative;
}



.group-manager {
    position: absolute;
    right: 21px;
    top: 7px;
    color: #1890ff;
    cursor: pointer;
}


.dg-group-select_el-tab {
    border: none !important;
    box-shadow: none !important;
    .hide-parent-checkbox {
        .el-checkbox {
            display: none;
        }
        .is-leaf + .el-checkbox {
            display: block;
        }
    }
}

.group-select-popper {
    .el-tabs__header {
        background-color: RGBA(0, 0, 0, 0.02) !important;
    }
    .el-select-dropdown__wrap {
        max-height: 380px;
    }
    .el-select-dropdown__list {
        padding: 0 !important;
        width: 640px;
    }
    .group-setting {
        .header {
            background-color: RGBA(0, 0, 0, 0.02) !important;
            border-bottom: 1px solid rgba(0, 0, 0, 0.15);
            margin: 0;
            height: 39px;
            line-height: 39px;
            .title-wrap {
                font-size: 14px;
                font-weight: bold;
                padding-left: 18px;
            }
            .desc-wrap {
                font-size: 12px;
                color: RGBA(0, 0, 0, 0.25);
                padding-left: 16px;
            }
            .button-wrap {
                float: right;
                margin-right: 26px;
            }
        }
        .content {
            padding: 16px;
        }
    }
    .el-transfer-panel {
        &__header {
            background: #f6fbff !important;
        }
        width: 264px;
    }
}


.custom-tree-node {
    width: 100%;
    height: 26px;
    line-height: 26px;
    padding-right: 16px;
    .label-wrap {
        display: inline-block;
        max-width: 150px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .button-wrap {
        float: right;
    }
    .edit-btn {
        visibility: hidden;
    }
    .del-btn{
        visibility: hidden;
    }
    .show-btn {
        visibility: visible;
    }
}
.group-header {
    .el-checkbox {
        display: inline-block !important;
    }
    .header-btn-wrap {
        display: inline-block;
        margin-right: 16px;
        float: right;
    }
}


.dg-group-select-transfer{
    .el-transfer__buttons {
        padding: 0 15px;
    }
}

/* 框架布局
-------------------------- */
/**
 * Dragonsoft Layout UI
 *
 * @author TangDM
 * @date 20190313
 */

/* Basic Global
-------------------------- */
html {
    font-size: 14px;
    @include mq($large) {
      font-size: 16px;
    }
    @include mq($medium) {
      font-size: 14px;
    }
    @include mq($small) {
        font-size: 12px;
    }
}

/* common setting
-------------------------- */
@include mq($large) {
	h1, h2, h3, h4, h5 {
		font-size: 18px;
	}
	p {
		font-size: 14px;
	}
	.l-small {
		font-size: 12px;
	}
}
@include mq($medium) {
    h1, h2, h3, h4, h5 {
        font-size: 16px;
    }
	p {
		font-size: 14px;
	}
	.l-small {
		font-size: 12px;
	}
}
@include mq($small) {
    h1, h2, h3, h4, h5 {
        font-size: 14px;
    }
	p {
		font-size: 12px;
	}
	.l-small {
		font-size: 12px;
	}
}

/* l-admin-app 全局
-------------------------- */
.l-admin-app {
    position: relative;
	min-width: 1280px;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: $l-admin-app-bg;
	&.hideSidebar {
        .l-sidebar {
            width: $l-sidebar-shrink-width !important;
        }
        .l-main-container {
            margin-left: $l-sidebar-shrink-width !important;
        }
		.el-menu--collapse .el-submenu>.el-submenu__title>span {
			height: 0;
			width: 0;
			overflow: hidden;
			visibility: hidden;
			display: inline-block;
		}
		.el-menu--collapse .el-submenu>.el-submenu__title>.el-submenu__icon-arrow {
			display: none;
			opacity: 0;
		}
		.u-menu .el-menu-item,
		.u-menu .el-submenu__title {
			padding: 0 !important;
			text-align: center;
			& .el-tooltip {
				padding: 0 !important;
			}
			.icon {
				width: auto;
				margin-right: 0;
			}
		}
	}
}

/* l-main-header  头部区域
-------------------------- */
.l-main-header {
    display: flex;
    border-radius: 0;
    height: $l-main-header-height;
    line-height: $l-main-header-height;
     @include linear-gradient($l-main-header-background-gradient-1, $l-main-header-background-gradient-2);

    &__center {
        flex: 1;
        min-width: 0;
        margin: 0 10px 0 20px;
    }

    &__left {
        display: flex;
        width: 100%;
        max-width: 420px;
        height: $l-main-header-height;
        float: left;
    }

    &__box {
        position: relative;
        width: 40px;
        margin-left: 2rem;
        margin-right: 10px;
    }

    &__logo {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: 40px;
        height: 20px;
        margin: auto;
    }

    &__title {
        flex: 1;
        min-width: 0;
        font-size: 20px;
        font-weight: bold;
        letter-spacing: 1px;
        color: $l-main-header-title-color;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        line-height: $l-main-header-height;
    }

    &__right {
        float: right;
        height: 100%;
        .el-icon-search{
            position: relative;
            top: 2px;
        }
    }

    &:focus {
        outline: none;
    }

    .right-menu-item {
        display: inline-block;
        margin: 0 8px;
    }

    .screenfull {
        height: 20px;
    }

    .international {
        vertical-align: top;
    }

    .theme-switch {
        vertical-align: 15px;
    }

    .avatar-container {
        height: 50px;
        margin-right: 30px;

        .avatar-wrapper {
            margin-top: 5px;
            position: relative;

            .user-avatar {
                cursor: pointer;
                width: 40px;
                height: 40px;
                border-radius: 10px;
            }

            .el-icon-caret-bottom {
                cursor: pointer;
                position: absolute;
                right: -20px;
                top: 25px;
                font-size: 12px;
            }
        }
    }
}


/* l-sidebar 侧边栏
-------------------------- */
.l-sidebar {
    position: absolute;
    bottom: 0;
    left: 0;
    top: $l-main-header-height;
    z-index: 1001;
    overflow: hidden;
    height: 100%;
    background: $l-sidebar-background;
    transition: width 0.28s;
	box-shadow: 0px 2px 8px rgba($--color-black, .1);
    width: $l-sidebar-width;
    &__header {
        width: 100%;
		padding: 0 16px;
        text-align: right;
		border-bottom: 1px solid $l-sidebar-header-border;
		box-sizing: border-box;
		height: 3rem;
        line-height: 3rem;
		i {
			font-size: 20px;
			text-align: center;
			color: $--color-text-regular;
			cursor: pointer;
			&.is-active {
				transform: rotate(180deg);
			}
		}
    }

    &__content {
        position: relative;
        width: 100%;
        height: calc(100vh - 7rem);
        overflow: hidden;
    }

	.el-submenu__icon-arrow {
		opacity: 1;
		transition: opacity .28s linear;
	}
}


/* u-menu 菜单
-------------------------- */
.l-sidebar__container{

    .l-sidebar__header{
        display: none;
    }

    &-toggle{
        margin-top: 10px;
        margin-left: calc(50% - 10px);
        font-size: 16px;
        color: #999;
        z-index: 1;

        i{
            font-size: 20px;
            cursor: pointer;
        }
    }



}

.u-menu {
    position: relative;

    .u-menu__container {
        width: 100%;
        border-right: 0;
        background: $u-menu-background;
    }

    .el-scrollbar {
        width: 100%;
        height: 100%;
    }

    .el-menu-item,
    .el-submenu__title {
        color: $u-menu-font;
        padding: 0 16px;
        transition: background-color 0.3s, color 0.3s, box-shadow 0.5s;
        height: $u-menu-item-height;
        line-height: $u-menu-item-height;

        .icon {
            display: inline-block;
            width: 10px;
            font-size: 14px;
            margin-right: 12px;
        }

        i {
            color: $u-menu-icon-font;
        }
    }

    .el-menu-item:hover,
    .el-submenu__title:hover {
        background-color: $u-menu-active-bg;
        color: $u-menu-font;

        i {
            color: $u-menu-icon-font;
        }
    }

    .el-menu-item.is-active,
    .el-submenu__title.is-active {
        background-color: $u-menu-select-bg;
        color: $u-menu-active-font;
        border-right: 3px solid $u-menu-active-font;

        .icon {
            color: $u-menu-active-font;
        }
    }

    .el-menu--inline {
        .icon {
            display: none;
        }
    }

    .el-menu-item,
    .el-submenu__title {
        span {
            display: inline-block;
            max-width: calc(100% - 20px);
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    }

    .el-submenu .el-menu-item {
        padding-left: 22px;
        min-width: 0;
        height: $u-menu-item-height;
        line-height: $u-menu-item-height;
        padding: 0 16px;
        box-sizing: border-box;

        span {
            display: inline-block;
            max-width: calc(100% - 20px);
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        p {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    }
    &__popover .el-menu {
        background: $u-menu-background;
    }
}




/* l-main-container  主体
-------------------------- */
.l-main-container {
    position: relative;
    height: 100%;
    margin-left: $l-sidebar-width;
    transition: margin-left 0.28s;
    &.is-menu-top {
        margin-left: 0;
    }
}


/* l-row-normal
-------------------------- */
.l-row-normal {
  margin-bottom: 1rem;
}
.l-row-normal .el-col + .el-col {
     padding-left: 1rem;
}

/* l-main-content  内容区域
-------------------------- */
.l-main-content {
    // navbar + tags-view = 4rem + 3rem
    height: calc(100vh - 7rem);
    width: 100%;
    position: relative;
    overflow: hidden;
}

/* l-card-box  卡片间距
-------------------------- */
.l-card-box {
    margin: 0 1rem;
}

/* l-main-tags  标签页区域
-------------------------- */
.l-main-tags {
    width: 100%;
    box-sizing: border-box;
	height: 3rem;
    &__container {
        display: flex;
        position: relative;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    .scroll-container {
        white-space: nowrap;
        position: relative;
        overflow: hidden;
        width: 100%;
        .el-scrollbar__view {
            user-select: none;
        }
        .el-scrollbar__bar {
            display: none;
        }
    }

    &__popover {
        padding: 12px 2px 12px 12px;
    }

    &__inner {
        padding-right: 8px;
    }

    &__list {
        flex: 1;
        -webkit-flex: 1;
        -moz-box-flex: 1;
        min-width: 0;
    }

    &__item {
        display: inline-block;
        position: relative;
        cursor: pointer;
        height: 28px;
        line-height: 26px;
        padding: 0 16px;
        //margin: 0 4px;
        box-sizing: border-box;
        font-size: 14px;
        color: $l-main-tags-item-font-color;
        background: $l-main-tags-item-background-color;
        border-radius: 4px;
		@include mq($large) {
			margin: $l-main-tags-item-large-margin;
		}
		@include mq($medium) {
			margin: $l-main-tags-item-medium-margin;
		}
		@include mq($small) {
			margin: $l-main-tags-item-small-margin;
		}
        &:first-of-type {
            margin-left: 16px;
        }

        &:last-of-type {
            margin-right: 16px;
        }

        &.active {
            background-color: $l-main-tags-item-active-background-color;
            color: $l-main-tags-item-active-font-color;
            border-color: $l-main-tags-item-active-background-color;
        }

        .el-icon-close {
            display: inline-block;
            width: 16px;
            height: 16px;
            line-height: 16px;
            vertical-align: middle;
            border-radius: 50%;
            text-align: center;
            transition: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);

            &:hover {
                color: $l-main-tags-item-close-color;
            }
        }
    }

    &__context {
        margin: 0;
        background: $l-main-context-background-color;
        z-index: 100;
        position: absolute;
        list-style-type: none;
        padding: 5px 0;
        border-radius: 4px;
        font-size: 12px;
        font-weight: 400;
        color: $--color-text-primary;
        box-shadow: 2px 2px 3px 0 rgba($--color-black, 0.3);

        li {
            margin: 0;
            padding: 7px 16px;
            cursor: pointer;

            &:hover {
                background: $l-main-tags-item-active-background-color;
            }
        }
    }

    &__btn {
        width: 58px;
        height: 28px;
        line-height: 28px;
        text-align: center;
        background: $l-main-tags-item-background-color;
        cursor: pointer;
        border-radius: 4px 0 0 4px;
        -webkit-border-radius: 4px 0 0 4px;
        -moz-border-radius: 4px 0 0 4px;
        box-shadow: 0 0 16px rgba(0,0,0,.09);
		@include mq($large) {
			margin: $l-main-tags-item-large-margin-top;
		}
		@include mq($medium) {
			margin: $l-main-tags-item-medium-margin-top;
		}
		@include mq($small) {
			margin: $l-main-tags-item-small-margin-top;
		}
        .icon {
            font-size: 12px;
            color: $--color-primary;
        }

        &-name {
            font-size: 12px;
            color: $--color-primary;
        }
    }

    &__name {
        display: inline-block;
        vertical-align: middle;
        max-width: 84px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
}

/* breadcrumb 面包屑
-------------------------- */
.app-breadcrumb.el-breadcrumb {
    font-size: 14px;
    margin-left: 16px;
    @include mq($large) {
        height: $l-sidebar-large-header-height;
        line-height: $l-sidebar-large-header-height;
    }
    @include mq($medium) {
        height: $l-sidebar-medium-header-height;
        line-height: $l-sidebar-medium-header-height;
    }
    @include mq($small) {
        height: $l-sidebar-small-header-height;
        line-height: $l-sidebar-small-header-height;
    }
    .no-redirect {
        color: $--color-text-primary;
        cursor: text;
    }
}

/* l-dropdown-tags  下拉标签列表
-------------------------- */
.l-dropdown-tags {
    display: block;
    width: 168px;
    min-height: 100px;
    overflow: hidden;

    &__item {
        display: block;
        margin: 10px auto;
        box-sizing: border-box;

        .el-icon-close {
            float: right;
            line-height: 28px;
        }

        &:first-of-type {
            margin-left: 0;
        }

        &:last-of-type {
            margin-right: 0;
        }
    }
}

/* l-main-page 页面区域
-------------------------- */
.l-main-page {
    position: relative;
    width: 100%;
    height: 100%;

    &__container {
        margin: 6px 14px;
        min-height: 200px;
        background: $--color-white;
    }
}

/* l-search-bar 全局搜索条
-------------------------- */
//.l-search-bar {
//    //display: block;
//    display: inline-block;
//    vertical-align: top;
//    //width: 10%;
//    //width: 200px;
//    margin-right: 20px;
//    //float: left;
//
//    .el-input__inner {
//        height: 30px;
//        line-height: 30px;
//    }
//}
.l-search {
  display: inline-block;
  padding: 0 10px;
  cursor: pointer;
  input{
    width: 0;
    border: none;
    background: none;
    border-bottom: 1px solid $l-main-header-title-color;
    color: $l-main-header-title-color;
  }
  span{
    color: $l-main-header-title-color;
  }
  .is-active-search-show{
    width: 120px;
    transition: width .4s;
  }
  .is-active-search-hide{
    width: 0;
    transition: width .4s;
  }
  ::-webkit-input-placeholder { /* WebKit browsers */
    color: $l-main-header-title-color;
  }
  :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: $l-main-header-title-color;
  }
  ::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: $l-main-header-title-color;
  }
  :-ms-input-placeholder { /* Internet Explorer 10+ */
    color: $l-main-header-title-color;
  }
}


/* l-screen-full 全屏操作
-------------------------- */
.l-screen-full {
    display: inline-block;
    vertical-align: middle;
    height: 16px;
    margin-right: 20px;
    //float: left;
}

/* l-avatar-box 全局登录控制
-------------------------- */
.l-avatar-box {
    //display: block;
    display: inline-block;
    vertical-align: top;
    margin-right: 15px;
    //float: left;

    &__user {
        margin-right: 4px;
        color: $l-avatar-box-font-color;
    }

    .icon {
        margin-right: 4px;
        color: $l-avatar-box-font-color;
    }

    .icon-close {
        cursor: pointer;
        color: $l-avatar-box-font-color;
    }
}

/* u-menu 弹层
-------------------------- */
.el-menu--vertical {
	.el-menu-item {
        height: $u-menu-item-height;
        line-height: $u-menu-item-height;
		.icon {
			display: none;
		}
		&.is-active {
			background-color: $u-menu-select-bg;
			color: $u-menu-active-font;
			border-right: 3px solid $u-menu-active-font;
		}
	}
	.el-submenu .icon {
		display: none;
	}
	.el-submenu__title {
        height: $u-menu-item-height;
        line-height: $u-menu-item-height;
	}
	.el-menu--popup-right-start {
		margin-right: 8px;
		margin-left: 8px;
	}
}
.el-menu--collapse .el-submenu.is-active:after {
	content: "";
	position: absolute;
	right: 0;
	top: 0;
	width: 2px;
	height: 100%;
	background: $u-menu-active-font;
}
.el-message-box__headerbtn {
	top: 33px;
}

.dg-container-box {
    height: 100%;
    min-height: calc( 100vh - 200px);
    margin: 0 1.5rem;
    &__content {
        width: 100%;
        height: 100%;
        min-height: calc( 100vh - 200px);

        &__left {
            padding: 10px;
            min-height: 100%;
            border-right: 1px solid $--border-color-base;
        }

        &__right {
            &__top {
                padding: 10px;
                border-bottom: 1px solid $--border-color-base;
            }

            &__middle {
                text-align: right;
                padding: 10px;
            }

            &__bottom {
                padding-left: 10px;
            }
        }
    }
}

/** tab页面内容 **/
.dg-content {
    height: 100%;
    //padding: 8px;

    & .dg-content.el-col.el-col-20 {
        padding-left: 16px;
    }

    &--bottom-border {
        & .el-button+.el-button {
            margin-left: 8px;
        }
    }

    &--right-border {
        border-right: 1px solid $--border-color-base;
        min-height: calc(100vh - 260px);
    }

    &--right {
        padding: 0 0 15px 0;
    }
}

.dialog-page-container {
    padding: 0px;
}

.layui-layer-content {
    padding: 16px 24px;
}

.form-container {

    .span-h1 {
        font-size: 20px;
        font-weight: bold;
        display: block;
        margin-bottom: 10px;
    }

    .span-desc {
        color: #888;
        display: block;
        margin-bottom: 10px;
    }
}

/* u-skins
-------------------------- */
.u-skins {
	position: relative;
	width: 60px;
    margin-right: 5px;
	float: left;
	&__base {
		width: 100%;
		height: 40px;
		box-sizing: border-box;
		cursor: pointer;
		&-icon {
			display: inline-block;
			width: 16px;
			height: 16px;
			vertical-align: middle;
			background: url("") no-repeat;
		}
		&-name {
			display: inline-block;
			color: #eef8fe;
			vertical-align: middle;
            @include mq($large) {
                font-size: 16px;
            }
            @include mq($medium) {
                font-size: 14px;
            }
            @include mq($small) {
                font-size: 14px;
            }
		}
	}
	&__item {
		width: 50px;
		height: 50px;
		text-align: center;
		cursor: pointer;
		float: left;
        list-style: none;
		&.is-active {
			color: $u-menu-active-font;
		}
		i {
			display: block;
			font-size: 25px;
		}
		span {
            font-size: 12px;
		}
	}
}

/* wscn-http404 缺省页面
-------------------------- */
.wscn-http404-container {
	transform: translate(-50%, -50%);
	position: absolute;
	top: 40%;
	left: 50%;
}

.wscn-http404 {
	position: relative;
	width: 1200px;
	padding: 0 50px;
	overflow: hidden;

	.pic-404 {
		position: relative;
		float: left;
		width: 600px;
		overflow: hidden;

		&__parent {
			width: 100%;
		}

		&__child {
			position: absolute;

			&.left {
				width: 80px;
				top: 17px;
				left: 220px;
				opacity: 0;
				animation-name: cloudLeft;
				animation-duration: 2s;
				animation-timing-function: linear;
				animation-fill-mode: forwards;
				animation-delay: 1s;
			}

			&.mid {
				width: 46px;
				top: 10px;
				left: 420px;
				opacity: 0;
				animation-name: cloudMid;
				animation-duration: 2s;
				animation-timing-function: linear;
				animation-fill-mode: forwards;
				animation-delay: 1.2s;
			}

			&.right {
				width: 62px;
				top: 100px;
				left: 500px;
				opacity: 0;
				animation-name: cloudRight;
				animation-duration: 2s;
				animation-timing-function: linear;
				animation-fill-mode: forwards;
				animation-delay: 1s;
			}

			@keyframes cloudLeft {
				0% {
					top: 17px;
					left: 220px;
					opacity: 0;
				}

				20% {
					top: 33px;
					left: 188px;
					opacity: 1;
				}

				80% {
					top: 81px;
					left: 92px;
					opacity: 1;
				}

				100% {
					top: 97px;
					left: 60px;
					opacity: 0;
				}
			}

			@keyframes cloudMid {
				0% {
					top: 10px;
					left: 420px;
					opacity: 0;
				}

				20% {
					top: 40px;
					left: 360px;
					opacity: 1;
				}

				70% {
					top: 130px;
					left: 180px;
					opacity: 1;
				}

				100% {
					top: 160px;
					left: 120px;
					opacity: 0;
				}
			}

			@keyframes cloudRight {
				0% {
					top: 100px;
					left: 500px;
					opacity: 0;
				}

				20% {
					top: 120px;
					left: 460px;
					opacity: 1;
				}

				80% {
					top: 180px;
					left: 340px;
					opacity: 1;
				}

				100% {
					top: 200px;
					left: 300px;
					opacity: 0;
				}
			}
		}
	}

	.bullshit {
		position: relative;
		float: left;
		width: 300px;
		padding: 30px 0;
		overflow: hidden;

		&__oops {
			font-size: 32px;
			font-weight: bold;
			line-height: 40px;
			color: #1482f0;
			opacity: 0;
			margin-bottom: 20px;
			animation-name: slideUp;
			animation-duration: 0.5s;
			animation-fill-mode: forwards;
		}

		&__headline {
			font-size: 20px;
			line-height: 24px;
			color: #222;
			font-weight: bold;
			opacity: 0;
			margin-bottom: 10px;
			animation-name: slideUp;
			animation-duration: 0.5s;
			animation-delay: 0.1s;
			animation-fill-mode: forwards;
		}

		&__info {
			font-size: 13px;
			line-height: 21px;
			color: grey;
			opacity: 0;
			margin-bottom: 30px;
			animation-name: slideUp;
			animation-duration: 0.5s;
			animation-delay: 0.2s;
			animation-fill-mode: forwards;
		}

		&__return-home {
			display: block;
			float: left;
			width: 110px;
			height: 36px;
			background: #1482f0;
			border-radius: 100px;
			text-align: center;
			color: #ffffff;
			opacity: 0;
			font-size: 14px;
			line-height: 36px;
			cursor: pointer;
			animation-name: slideUp;
			animation-duration: 0.5s;
			animation-delay: 0.3s;
			animation-fill-mode: forwards;
		}

		@keyframes slideUp {
			0% {
				transform: translateY(60px);
				opacity: 0;
			}

			100% {
				transform: translateY(0);
				opacity: 1;
			}
		}
	}
}

/* l-card-box 卡片布局
-------------------------- */
.l-card-box {
    & >.el-card__body {
      min-height: calc( 100vh - 255px )
    }
}
.copyright {
    text-align: center;
    font-size: 12px;
    padding: 2rem 0 1.5rem;
    color: $--color-text-regular;
}

/* l-template-box 通用布局
-------------------------- */
.l-template-box{
  width: 100%;
  background: $l-template-box-bacground-color;
  border-radius: 4px;
  margin-bottom: 15px;

    &__header{
      height: 3.5rem;
      line-height: 3.5rem;
      padding: 0 2rem;
      border-bottom: 1px solid $--border-color-extra-light;

      & > div{
        min-height: 10px;
      }

      &-middle{
        text-align: center;
      }

      &-right{
        text-align: right;
          cursor: pointer;
      }
    }

    &__tabs{

      .el-tabs__nav{
        padding: 0  2rem;
        height: 3.5rem;
        line-height: 3.5rem;


        div{
          font-size: 1rem;
          font-weight: normal;
        }
      }

      .el-tabs__active-bar{
        margin-left: 2rem;
      }

      .el-tabs__nav-wrap::after{
        height: 1px;
      }

      .el-tabs__header{
        margin: 0;
      }

      .el-tabs__item{
          color: $--color-text-regular;
      }

        .is-active{
            color: #1890ff!important;
        }
    }

  .is-active-bottom{
    border-bottom: none;
  }

  &__content{
    padding: 1.5rem 2rem;
  }
}

/* l-card 卡片布局
-------------------------- */
.l-card{
    &__default{
        display: inline-block;
        position: relative;
        border-radius: 1px;
        height: 100%;

        img{
            width: 100%;
            height: 100%;
            border:0;
            vertical-align:top;
        }

        &-content{
            height: 52px;
            background-color: rgba(0, 0, 0, 0.6);
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            font-size: 12px;
            color: #ffffff;
            padding: 6px 0 9px 0;
            box-sizing: border-box;

            &-text{
                text-align: center;
                &-id{
                    margin-top: 5px;
                    text-align: center
                }
            }
        }

        &-right{
            display: inline-block;
            border: 1px solid red;
            vertical-align: top;
        }

        &-label{
            position: absolute;
            right: -15px;
            top: 118px;
            border-radius: 5px;
            text-align: center;
            height: 20px;
            width: 55px;
            line-height: 20px;
            font-size: 12px;
            -webkit-transform: rotate(-30deg);
            transform: rotate(-18deg);
        }

        .is-active-pass{
            border: 1px solid #6699ff;
            color: #6699ff;
        }

        .is-active-notpass{
            border: 1px solid #ff0000;
            color: #ff0000;
        }
    }

    &__about{
        border: 1px solid $--border-color-base;
        height: 120px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        border-radius: 3px;

        .el-checkbox__inner{
            background: #fff;
        }

        &-img{
            display: inline-block;
            width: 120px;
            height: 100%;
            position: relative;

            img{
                width: 100%;
                height: 100%;
            }

        }

        &-right{
            display: inline-block;
            box-sizing: border-box;
            padding: 15px;
            height: 100%;
            width: calc(100% - 127px);
            position: relative;
            left: -5px;
            vertical-align: top;

            &__content{
                display: inline-block;
                box-sizing: border-box;
                overflow: hidden;
                h3{
                    font-size: 14px;
                    line-height: 14px;
                    color: $--color-text-primary;
                    font-weight: 800;
                    margin-bottom: 12px;
                }

                p{
                    font-size: 12px;
                    color: $--color-text-secondary;
                    display: -webkit-box;
                }

                em{
                    font-size: 12px;
                    color: $--color-text-primary;
                }
            }

            &-checkbox{
                position: absolute;
                top: 5px;
                right: 2px
            }
        }
    }

    &__up-down{
        height: 357px;
        margin-bottom: 16px;
        border: solid 1px $--border-color-base;
        position: relative;

        &>img{
            width: 100%;
            height: 210px;
        }
        &-text{
            padding: 24px 16px 0 16px;

            h2{
                line-height: 16px;
                 color: $--color-text-primary;
                font-weight: 800;
                margin-bottom: 16px;
            }
            p{
                line-height: 22px;
                color: $--color-text-secondary;
            }

            &-footer{
                width: 100%;
                font-size: 12px;
                color: $--color-text-regular;
                position: absolute;
                bottom: 0;
                left: 0;
                box-sizing: border-box;
                padding:0 16px 24px 16px;

            }

            .el-icon-download{
                font-size: 16px;
                color: $--color-primary;
                float: right;
                cursor: pointer;
            }

        }
    }
}

/* 各种文字字体配置
-------------------------- */
// 导航条文字
.dg-words-nav{
    @include mq($large) {
        font-size: 14px;
    }
    @include mq($medium) {
        font-size: 14px;
    }
    @include mq($small) {
        font-size: 14px;
    }
}

// 一级标题（卡片内标题文字）
.dg-words-title-first{
    font-weight:700;
    color: $--color-text-primary;

    @include mq($large) {
        font-size: 18px;
    }
    @include mq($medium) {
        font-size: 16px;
    }
    @include mq($small) {
        font-size: 14px;
    }
}

// 二级标题
.dg-words-title-second{
    font-weight:700;
    color: $--color-text-primary;

    @include mq($large) {
        font-size: 16px;
    }
    @include mq($medium) {
        font-size: 14px;
    }
    @include mq($small) {
        font-size: 12px;
    }
}

// 正文文字
.dg-words-normal{
    color: $--color-text-primary;

    @include mq($large) {
        font-size: 14px;
    }
    @include mq($medium) {
        font-size: 14px;
    }
    @include mq($small) {
        font-size: 12px;
    }
}

// 小文字（辅助文字、次要文字）
.dg-words-auxiliary{
    font-size: 12px;
}

// 标签文字
.dg-words-tag{
    font-size: 12px;
    color: $--color-text-primary;
}

/* 各种文字字体颜色
-------------------------- */
.dg-color-text-85{
    color: $--color-text-primary;
}
.dg-color-text-65{
    color: $--color-text-secondary;
}
.dg-color-text-45{
    color: $--color-text-regular;
}
.dg-color-text-25{
    color: $--color-text-placeholder;
}

/* 强制标红颜色
-------------------------- */
.dg-color-red{
    color: #f5222d !important;
}

.dg-color-blue{
    color: $--color-primary;
}

/* element 默认修改
-------------------------- */
.el-form-item__label{
    color: $--color-text-secondary;
}


/* l-menu-top  横向导航布局
-------------------------- */
@mixin menu-tb-height {
    height: $l-main-header-height;
    line-height: $l-main-header-height;
}

.u-menu-top {
    flex: 1;
    min-width: 0;
    &__list {
        width: 100%;
        &.el-menu.el-menu--horizontal {
            border-bottom: 0;
        }
    }
    &__item {
        margin: 0;
        float: left;
        @include menu-tb-height;
        .el-menu-item {
            padding: 0 1.5rem;
        }
        > .el-submenu .el-submenu__icon-arrow,
        > .el-submenu .icon {
            display: none;
        }
        > .el-submenu span,
        .el-menu-item span {
            color: $u-menu-top-item-font;
        }
        .el-menu-item .icon {
            display: none;
        }
        .el-menu-item .icon {
            display: none;
        }
        .el-menu-item {
            @include menu-tb-height;
        }
        .el-submenu,
        .el-submenu__title {
            box-sizing: border-box;
            @include menu-tb-height;
        }
        .el-submenu__title {
            border-bottom: 2px solid transparent;
        }
        .el-submenu.is-active .el-submenu__title {
            border-bottom-color: $u-menu-top-border-bottom-color;
        }
        .el-submenu__title:hover,
        .el-submenu__title:focus {
            background: $u-menu-top-item-active-bg;
            border-bottom-color: $u-menu-top-border-bottom-color;
        }
        .el-menu-item:hover,
        .el-menu-item:focus {
            background: $u-menu-top-item-active-bg;
            border-bottom: 2px solid $u-menu-top-border-bottom-color;
        }
        .el-menu-item.is-active,
        .el-submenu.is-active {
            border-bottom: 2px solid $u-menu-top-border-bottom-color;
        }
    }
    &__popover {
        background: transparent;
        &.is-hidden {
            display: none;
        }
        .el-menu--popup {
            padding: 4px 0;
            background: $u-menu-top-popover-background;
        }
        .el-menu-item:not(.is-disabled):hover,
        .el-menu-item:not(.is-disabled):focus {
            background-color: $u-menu-top-active-bg;
        }
        .el-menu .el-menu-item.is-active,
        .el-menu .el-submenu.is-active > .el-submenu__title {
            background-color: $u-menu-top-select-bg;
            color: $u-menu-top-active-font;
        }
        .el-menu .el-menu-item,
        .el-menu .el-submenu__title {
            background: $u-menu-top-popover-background;
            padding: 0 1rem 0 1.5rem;
            height: 3rem;
            line-height: 3rem;
        }
        .el-menu .el-menu-item,
        .el-menu .el-submenu__title {
            color: $u-menu-top-sub-item-font;
        }
        .el-submenu__title .icon {
            display: none;
        }
    }
}

/* 登录界面
-------------------------- */
$bg: #2d3a4b;
$dark_gray: #889aa4;
$light_gray: #eee;

.login-container {
  min-height: 100vh;
  width: 100%;
  background-color: $bg;
  overflow: hidden;
  .login-form {
    position: relative;
    width: 520px;
    max-width: 100%;
    padding: 160px 35px 0;
    margin: 0 auto;
    overflow: hidden;
  }
  .tips {
    font-size: 14px;
    color: #fff;
    margin-bottom: 10px;
    span {
      &:first-of-type {
        margin-right: 16px;
      }
    }
  }
  .svg-container {
    padding: 6px 5px 6px 15px;
    color: $dark_gray;
    vertical-align: middle;
    width: 30px;
    display: inline-block;
  }
  .title-container {
    position: relative;
    .title {
      font-size: 26px;
      color: $light_gray;
      margin: 0px auto 40px auto;
      text-align: center;
      font-weight: bold;
    }
    .set-language {
      color: #fff;
      position: absolute;
      top: 5px;
      right: 0px;
    }
  }
  .show-pwd {
    position: absolute;
    right: 10px;
    top: 7px;
    font-size: 16px;
    color: $dark_gray;
    cursor: pointer;
    user-select: none;
  }
  .thirdparty-button {
    position: absolute;
    right: 0;
    bottom: 6px;
  }
}
/* 修复input 背景不协调 和光标变色 */
/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */

$bg: #283443;
$light_gray: #eee;
$cursor: #fff;

@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
  .login-container .el-input input {
    color: $cursor;
    &::first-line {
      color: $light_gray;
    }
  }
}

/* reset element-ui css */
.login-container {
  .el-input {
    display: inline-block;
    height: 47px;
    width: 85%;
    input {
      background: transparent;
      border: 0px;
      -webkit-appearance: none;
      border-radius: 0px;
      padding: 12px 5px 12px 15px;
      color: $light_gray;
      height: 47px;
      caret-color: $cursor;
      &:-webkit-autofill {
        -webkit-box-shadow: 0 0 0px 1000px $bg inset !important;
        -webkit-text-fill-color: $cursor !important;
      }
    }
  }
  .el-form-item {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    color: #454545;
  }
}

/* 通用样式
-------------------------- */
/* 表单label样式
-------------------------- */
.el-form {
    .el-form-item {
        margin-bottom: 20px;
    }
}

// 抵消 table-form 中的 margin-bottom: 20px;
.dg-table {
    .el-form-item.dg-form-column__form-item--wrap {
        margin-bottom: 0;
    }
}

/* 标题通用样式
-------------------------- */
.v-h4 {
    font-size: 16px;
    margin-bottom: 16px;
}

.v-p {
    font-size: 16px;
}

/* 链接通用样式
-------------------------- */
.v-link {
    font-size: 14px;
    color: $--color-primary;
    cursor: pointer;

    &:visited,
    &:link {
        text-decoration: underline;
    }
}

/* 弹窗样式
-------------------------- */
.dialog-page-container .dg-dialog__footer {
    border: 0px;
}

.v-title-info {
    font-weight: bold;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 12px;
}

/* 表格搜索样式
-------------------------- */
.dg-content {
    .el-form {
        .el-form-item {
            margin-bottom: 16px;
            margin-right: 48px;
        }

        .v-form-search-box {
            text-align: right;
            display: block;
        }
    }

    .search-form {
        .el-col {
            .el-form-item {
                display: flex;

                .el-form-item__label {
                    white-space: nowrap;
                    flex-basis: auto;
                }

                .el-form-item__content {
                    width: 100%;
                }

                .el-select {
                    width: 100%;
                }

                .el-input__inner {
                    width: 100%;
                }

                .el-input {
                    width: 100%;
                }
            }
        }
    }
}

// 首页样式 -- 图标
// 资源检测图标




.icon-word-box {
    & .icon {
        float: left;
        width: 50px;
        height: 50px;
        border-radius: 3px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    & .word {
        float: left;
        margin-left: 15px;
        & .title {
            font-size: 14px;
            color: $--color-text-regular;
        }
        & .subTitle {
            font-size: 24px;
            color: $--color-text-primary;
        }
    }
}

.word-title {
    font-size: 16px;
    color: $--color-text-primary;
    margin-bottom: 25px;
}
/* 首页-流入流出
-------------------------- */
.v-inflow-outflow{
    box-sizing: border-box;
    height: 380px;

    &-echerts{
        position: relative;
        &>span{
            font-size: 14px;
            color: #8c8c8c;
            position: absolute;
            top: -6px;
            left: 0;
        }
    }

    &-box{
        position: relative;
    }

    &-right{
        height: 270px;
        margin-left: 20px;
        padding-left: 32px;
        border-left:1px solid $--border-color-extra-light;
        &-row{
            padding: 10px;
            font-size: 14px;
            line-height: 14px;
            color: $--color-text-primary;

            &-city{
                margin-left: 14px;
            }
            &-right{
                text-align: right;
            }

        }
        h3{
            margin-bottom: 20px;
            font-size: 14px;
            line-height: 14px;
            color: $--color-text-regular;
        }
        .is-default-background{
            display: inline-block;
            width: 16px;
            height: 16px;
            line-height: 16px;
            font-size: 12px;
            text-align: center;
            background-color: rgba(0, 0, 0, 0.04);
        }
        .is-red{
            color: #fff;
            background: red;
        }
        .is-orange{
            color: #fff;
            background: #fb982d;
        }
        .is-yellow{
            color: #fff;
            background-color: #fadb14;
        }
    }
}

/* 首页布应用服务
-------------------------- */
.v-yyfw-pop{

    .el-carousel__container{
        height: 190px;
    }

    &__box{
        width: 100%;
        height: 185px;
        border-radius: 2px;
        //border: solid 1px rgba(0, 0, 0, 0.15);
        border: solid 1px $--border-color-base;
        box-sizing: border-box;
        display: inline-block;
        margin-right: 16px;
        overflow: hidden;

        & > div{
            width: 300px;
            margin: 35px auto
        }

        &-left{
            display: inline-block;

            img{
                width: 108px;
                height: 108px;
                display: inline-block
            }
        }

        &-right{
            display: inline-block;
            vertical-align: top;
            margin-top: 20px;
            @include mq($large) {
                width:180px;
            }
            @include mq($medium) {
                width:160px;
            }
            @include mq($small) {
                width:160px;
            }
        }

    }

    .el-carousel__indicator--horizontal{
        padding: 12px 6px;

        button{
            width: 20px;
        }
    }

}

/* 首页 table-model组件
-------------------------- */
.v-tm{
    & > div{
        display: inline-block;
    }
    &__left{
        width: 100%;
        height: 442px;
        vertical-align: top;
    }
    &__right{
        width: 100%;
        display: inline-block;
        height: 442px;
        .l-template-box{
            height: 442px;
            &__header-right{
                font-size: 14px;
                color: $--color-text-regular;
                float: right;
                padding: 3px 0;
            }
        }
    }
}

/* 我的资源和资源
-------------------------- */
.v-resources{
    &__left,
    &__right{
        height: 398px;
    }
    &__box{
        &-item{
            margin-top: 40px;
            line-height: 40px;
        }
        &-title{
            padding-bottom: 18px;
            border-bottom: solid 1px rgba(0, 0, 0, 0.09);
            line-height: 18px;
            letter-spacing: 0;
            font-weight: 500;
            color: $--color-text-primary;
        }
        .is-change-position{
            position: relative;
            top: 8px;
        }
        &-item-left{
            i{
                font-size: 44px;
                color: $--message-close-icon-color;
            }
            display: inline-block;
            &>span{
                display: inline-block;
                margin-left: 10px;

                span{
                    color: $--color-text-primary;

                    @include mq($large) {
                        font-size: 24px;
                    }
                    @include mq($medium) {
                        font-size: 20px;
                    }
                    @include mq($small) {
                        font-size: 16px;
                    }
                }

                & p:first-child{
                    line-height: 14px;
                    color: $--color-text-regular;
                    @include mq($large) {
                        font-size: 14px;
                    }
                    @include mq($medium) {
                        font-size: 14px;
                    }
                    @include mq($small) {
                        font-size: 12px;
                    }
                }
                & p:last-child{
                    line-height: 14px;
                    color: $--color-text-primary;
                    margin-top: 5px;

                    @include mq($large) {
                        font-size: 14px;
                    }
                    @include mq($medium) {
                        font-size: 14px;
                    }
                    @include mq($small) {
                        font-size: 12px;
                    }
                }
            }
        }
        &-item-right{
            display: inline-block;
            float: right;
            text-align: right;

            & p:first-child{
                line-height: 14px;
                color: $--color-text-primary;
                @include mq($large) {
                    font-size: 16px;
                }
                @include mq($medium) {
                    font-size: 14px;
                }
                @include mq($small) {
                    font-size: 12px;
                }
            }

            & p:last-child{
                line-height: 14px;
                color: $--color-text-regular;
                margin-top: 10px;

                @include mq($large) {
                    font-size: 14px;
                }
                @include mq($medium) {
                    font-size: 14px;
                }
                @include mq($small) {
                    font-size: 12px;
                }
            }
        }
    }

}

/* 首页、年度累计、本月累计、曲线图
-------------------------- */
.v-cumulative{

    .l-template-box{
        height: 400px;
        box-sizing: border-box;
    }
    &-year{
        .l-template-box__content{
            padding: 24px 0;
        }

        // .v-cumulative-box{
        //     background: url("../../../static/page/dashboard/cumulative-background.png") no-repeat;
        //     background-size: 100%;
        // }
    }

    &-box{
        text-align: center;
        height: 100%;
        width: 100%;
        margin-top: 60px;

        &__header{
            position: relative;
            h3{
                font-size: 18px;
                line-height: 18px;
                color: $--color-text-primary
            }

            p{
                span{
                    font-size: 42px;
                    color: $--color-primary;
                    position: relative;

                    em{
                        font-size: 12px;
                        color: #27dbd9;
                        position: absolute;
                        top: 24px;
                        right: -45px;
                    }
                }
            }

            span{
                font-size: 12px;
                color: $--color-text-regular
            }

        }
        &__footer{
            margin-top: 60px;

            h2{
                font-size: 14px;
                color: $--color-text-secondary
            }

            span{
                font-size: 20px;
                color: $--color-text-primary;

            }
            p{
                position: relative;
            }
            em{
                position: absolute;
                top: 10px;
                font-size: 12px;
                color: #27dbd9;

                @include mq($large) {
                  right: 10px;
                }
                @include mq($medium) {
                  right: 0;
                }
                @include mq($small) {
                  right: -14px;
                }
            }
        }
    }

    &-chart{
        position: relative;

        &__select{
            width: 106px;
        }
    }
}

/* 表单样式
-------------------------- */
.v-form-single {
    .el-form-item__label {
        width: 100%;
    }
    .el-date-editor--daterange.el-input__inner {
        width: 100%;
    }
}
.v-form {
    &__title {
        font-weight: bold;
    }
    .el-date-editor.el-input, .el-date-editor.el-input__inner {
        width: 100%;
    }
}
.v-form-text {
    .el-form-item {
        margin-bottom: 0;
    }
    .el-form-item__label {
        color: $--color-text-secondary;
    }
}

.v-exception-demo {
    background: $--fill-base;
}

.v-field-bottom {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 1;
    display: inline-block;
    width: 100%;
    box-shadow: 0 0 4px #ccc;
    background: $--fill-base;
    .el-row {
        padding: 0 54px;
        box-sizing: border-box;
    }
    &__buttons {
        float: right;
    }
}

/* 分栏内侧布局
-------------------------- */
.v-inside-layout {
    position: relative;
    &__left {
        height: 100%;
        border-right: 1px solid $--border-color-base;
        box-sizing: border-box;
    }
    &__right {
        height: 100%
    }
    /deep/ {
        .el-card__body {
            padding: 0;
        }
    }
    &__tag{
      .dg-tag+.dg-tag{
        margin-left: 0;
        //margin-right: 8px;
      }
      & span{
        margin-right: 8px;
      }
    }
}

// 搜索树
.v-search-tree {
    position: relative;
    &__header {
        padding: 1rem 20px 0;
        /deep/ {
            .el-button--text+.el-button--text {
                margin-left: 2rem;
            }
        }
    }
    &__body {
        padding: 0 20px;
    }
}

// 编辑树
.v-edit-tree {
    /deep/ {
        .v-edit-tree__edit {
            box-sizing: border-box;
            width: calc(100% - 40px);
            height: 20px;
            padding: 2px 6px;
            line-height: 16px;
            border: 0px;
            background: $--input-background-color;
        }
        .v-edit-tree__label {
            display: block;
            width: calc(100% - 40px);
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        .v-edit-tree__buttons {
            display: none;
            position: absolute;
            top: 0;
            right: 4px;
            z-index: 1;
        }
        .el-tree-node.is-current > .el-tree-node__content .v-edit-tree__buttons {
            display: block;
        }
        .dg-tree-node .el-tree-node__label {
            width: 100%;
        }
        .dg-tree-node .el-tree-node__content {
            position: relative;
        }
    }
}

/* 分栏外侧布局
-------------------------- */
.v-outside-layout {
    // 搜索区域
    .v-search-box {
        height: 100%;
        &__header {
            padding: 1rem 20px 0;
        }
        /deep/ {
            .el-card__body {
                padding: 0;
            }
        }
    }
    // 通用菜单
    .v-normal-menu {
        position: relative;
        &__container {
            width: 100%;
            border-right: 0;
        }
        /deep/ {
            .el-menu-item,
            .el-submenu__title {
                color: $--color-text-secondary;
                padding: 0 16px;
                transition: background-color .3s,color .3s,box-shadow .5s,-webkit-box-shadow .5s;
                height: 3rem;
                line-height: 3rem;
                @include mq($large) {
                    font-size: 14px;
                }
                @include mq($medium) {
                    font-size: 14px;
                }
                @include mq($small) {
                    font-size: 12px;
                }
            }
            .el-menu-item.is-active,
            .el-submenu__title.is-active {
                background-color: rgba(24,144,255,.12);
                color: $--color-primary;
            }
        }
    }
    // 图表
    .v-charts-box {
        height: 100%;
        &__model {
            margin: 0 auto;
        }
    }
}

/* 执法办案
-------------------------- */
.v-ajsl{
  .el-form-item__content{
    margin-left: 75px;
  }
  .el-form-item__label{
    width: 70px;
    position: relative;
    left: 5px;
  }
  .v-caseAcceptance{

    &__source{

      margin-bottom: 42px;
      h3{
        margin-bottom: 24px;
      }
    }

    &__prople{

      margin-bottom: 12px;
    }
  }

  .v-opinion{

    &__header{
        width: 380px;float: right
    }

    &__radio{
      label{
        display: block;
        padding: 9px 0;
      }
    }
  }

  .v-caseAcceptance__h3{
    margin-bottom: 16px;
  }

    .el-date-editor.el-input,
    .el-date-editor.el-input__inner{
        width: 100%;
    }

}

/* 分布表单
-------------------------- */
.v-distribution-form{
  min-height: calc(100vh - 180px);

  &__button{
      @include mq($large) {
          min-width: 100px
      }
      @include mq($medium) {
          min-width: 100px
      }
      @include mq($small) {
          min-width: 100px
      }
  }

  &-padding{
    padding: 0 120px 0 45px
  }

  &-stepControl{
    padding: 0 120px 0 125px;
    text-align: center;
  }

  &__content{
    width: 780px;
    margin: 0 auto;

    &-steps{
      margin-bottom: 34px;

        .el-step__title{
            @include mq($large) {
                font-size: 14px;
            }
            @include mq($medium) {
                font-size: 14px;
            }
            @include mq($small) {
                font-size: 12px;
            }
        }
    }

    & .el-step__icon{
        width: 32px;
        height: 32px;
        background: transparent;
    }
      .el-step.is-center .el-step__line{
          left: 47%;
          right: -44%;
          top: 15px;
      }

    &-button{
      text-align: center;
    }

    &-secend_step{

      &-header{
        margin-bottom: 30px;
        margin-left: 72px;
        width: 545px;
      }

      &-box{
        padding-left: 45px;
        .el-form-item{
          margin-bottom: 10px;
        }
      }
    }

    &-three_step{
      margin-top: 112px;
      text-align: center;
      padding: 0 0 0 1px;

      & > i{
        font-size: 50px;
        margin-bottom: 25px;
        color: #52c41a;
        margin-right: 35px;
      }

      h1{
        font-size: 32px;
        margin-bottom: 16px;
        font-weight: 700;
      }

      &-footer{
        margin-top: 32px;
        span{
          margin: 0 16px;
          color: #00b7ee;
          cursor:pointer;
        }
      }

    }
  }

    &__footer{
        font-size: 16px;
        padding: 56px 0 40px 54px;
        border-top:  solid 1px rgba(0, 0, 0, 0.09);
        margin-top: 54px;

        & > p{
            font-weight: 500;
            color: $--color-text-regular;
            margin-bottom: 10px;
        }

        .dg-words-normal{
            p{
                display: inline-block;
                color: $--color-text-regular;
            }
            & p:last-child{
                margin-left: 60px;
            }
        }
    }
}

/* 搜索列表- 筛选部分
-------------------------- */
.v-search-list__toggle{
    .el-button--primary{
        color: $--color-white !important;
    }
}
.tab-toggle-button{
    padding: 0;
    width: 32px;
    height: 32px;
    color: $--color-text-secondary;
}
.v-screen-card {

    .first-padding{
        padding: 0 0 12px 0;
    }

    &__box {
        padding: 12px 0;
        border-bottom: 1px dotted rgba(0, 0, 0, 0.09);
        & > span:first-child {
            display: inline-block;
            width: 110px;
            text-align: right;
            line-height: 14px;
            color: $--color-text-regular;
        }

        span {
            cursor: pointer;
        }

        .dg-tag {
            margin-right: 24px !important;
            margin-left: 0 !important;
            height: 32px;
            line-height: 32px;
            padding: 0 16px;

            @include mq($large) {
                font-size: 14px;
                height: 32px;
                line-height: 32px;
            }
            @include mq($medium) {
                font-size: 14px;
                height: 28px;
                line-height: 28px;
            }
            @include mq($small) {
                font-size: 12px;
                height: 24px;
                line-height: 24px;
            }
        }
    }

    &__date {
        display: inline-block;

        .el-input__inner{
            width: 320px;
        }

    }

    &__button {
        margin-left: 8px;
    }
}

/* 搜索列表-- 卡片2
-------------------------- */
.l-infomation-card{
    border: solid 1px $--border-color-extra-light;
    box-sizing: border-box;
    margin-bottom: 20px;
    height: 120px;

    .el-checkbox__inner{
        background: #fff;
    }

    &__img{
        display: inline-block;
        vertical-align: top;
        position: relative;
        width: 100%;
        height: 118px;

        img{
            width: 100%;
            height: 100%;
        }

        .el-checkbox{
            position: absolute;
            top: 10px;
            left: 10px;
        }
    }

    &__content{
        display: inline-block;
        padding: 14px 14px 12px 16px;
        box-sizing: border-box;
        overflow: hidden;

        h3{
            font-size: 14px;
            line-height: 14px;
            color: $--color-text-primary;
            font-weight: 800;
            margin-bottom: 12px;
        }

        p{
            font-size: 12px;
            color: $--color-text-regular;
        }

        em{
            font-size: 12px;
            color: $--color-text-primary;
        }
    }
}

/* 搜索列表-- 卡片3
-------------------------- */
.v-card-box{
    border: solid 1px rgba(0, 0, 0, 0.15);
    margin-bottom: 20px;
    width: 100%;
    background: $l-template-box-bacground-color;

    &__content{
        padding: 24px 32px;

        &-tittle{

            span{
                display: inline-block;
                width: 25px;
                height: 25px;
                background: #00bb00;
                border-radius: 50%;
                i{
                    color: #ffffff;
                    margin-left: 4px;
                }
            }
            h2{
                color: $--color-text-primary;
                font-size: 18px;
                font-weight: 800;
                display: inline-block;
                margin-left: 10px;
            }
        }

        &-num{
            padding: 0 41px;

            &>div{
                display: inline-block;
                vertical-align: top;

                h3{
                    font-size: 14px;
                    color: $--color-text-secondary;
                    padding: 20px 0 10px;
                }

                span{
                    font-size: 24px;
                    color: $--color-text-primary;
                }
            }

            &>div:first-child{
                margin-right: 56px;
            }

        }
    }
    &__footer{
        height: 48px;
        line-height: 48px;
        background-color: $--disabled-fill-base;
        text-align: center;
        cursor: pointer;

        &-border-left{
            border-right:1px solid $--border-color-extra-light;
        }

        &-icon{
            height: 30px;
            line-height: 30px;
            position: relative;
            top: 10px;
        }
    }
}

/* 搜索列表-- 卡片4
-------------------------- */
.v-card__up-down{
    height: 357px;
    width: 100%;
    margin-bottom: 16px;
    border: solid 1px rgba(0, 0, 0, 0.15);
    position: relative;

    &>img{
        width: 100%;
        height: 210px;
    }
    &-text{
        padding: 24px 16px 0 16px;

        h2{
            //font-size: 16px;
            line-height: 16px;
            color: $--color-text-primary;
            font-weight: 800;
            margin-bottom: 16px;
        }

        p{
            //font-size: 14px;
            line-height: 22px;
            color: rgba(0, 0, 0, 0.65);
        }

        &-footer{
            width: 100%;
            font-size: 12px;
            color: $--color-text-regular;
            position: absolute;
            bottom: 0;
            left: 0;
            box-sizing: border-box;
            padding:0 16px 24px 16px;

        }

        .el-icon-download{
            font-size: 16px;
            color: $--color-primary;
            float: right;
        }

    }
}

/* 结果页-- 提交成功
-------------------------- */
.v-submit-successfully{

    &__header{
        padding: 88px 0 36px 0;
        text-align: center;

        i{
            font-size: 72px!important;
            color: #52c41a;
            position: relative;
            left: -25px;
            margin-bottom: 16px;
        }

        h1{
            font-size: 32px;
            color: $--color-text-primary;
            margin-bottom: 5px;
            font-weight: 700;
        }

        p{
            font-size: 16px;
            color: $--color-text-secondary;
        }
    }

    &__content{
        height: 228px;
        padding: 32px;
        box-sizing: border-box;
        background-color: rgba(0, 0, 0, 0.02);
        border: 1px solid $v-submit-successfully-content-border;
        border-radius: 2px;
        h2{
            //font-size: 18px;
            line-height: 1;
            color: $--color-text-primary;
            font-weight: 800;
        }
        &-text{
            margin-top: 25px;
            em{
                color: $--color-text-primary;
            }
        }
        &-step{
            margin-top: 32px;
            .el-step__head.is-process .el-step__icon{
                background: #ccc;
                border:1px solid #ccc !important;
                color: #ccc;
            }
            .el-step.is-center .el-step__line{
                left: 45%;
                right: -48%;
            }
            .el-step__icon{
                background: #ccc;
                color: #ccc;
                width: 12px;
                height: 12px;
            }
            .el-step__icon.is-text{
                border:1px solid #ccc;
            }
            .is-finish{
                .el-step__icon{
                    background: $--color-primary;
                    color: $--color-primary;
                    border:1px solid $--color-primary;
                }
            }
            .el-step__main{
                .el-step__title.is-finish{
                    font-weight: 700;
                    color: $--color-text-secondary;
                }
                .el-step__description.is-finish{
                    color: $--color-text-regular;
                }
                .el-step__title.is-process{
                    font-weight: 500;
                    color: $--color-text-regular;
                }
                .el-step__title.is-wait{
                    color: $--color-text-regular;
                }

                .el-step__title{
                    @include mq($large) {
                        font-size: 14px;
                    }
                    @include mq($medium) {
                        font-size: 14px;
                    }
                    @include mq($small) {
                        font-size: 12px;
                    }
                }
            }
        }
    }

    &__footer{
        text-align: center;
        margin-top: 16px;
    }
}

/* 结果页-- 提交失败
-------------------------- */
.v-submit-failure{
    .el-icon-error{
        color: #f5222d;
    }

    &__header{
        padding: 88px 0 36px 0;
        text-align: center;
        i{
            font-size: 72px!important;
            color: #52c41a;
            position: relative;
            left: -25px;
            margin-bottom: 16px;
        }
        h1{
            font-size: 32px;
            color: $--color-text-primary;
            margin-bottom: 5px;
            font-weight: 700;
        }
        p{
            font-size: 16px;
            color: $--color-text-secondary;
        }
    }

    &__content{
        height: 150px;
        padding: 32px;
        box-sizing: border-box;
        background-color: rgba(0, 0, 0, 0.02);
        border-radius: 2px;
        border: 1px solid $v-submit-successfully-content-border;

        h2{
            line-height: 18px;
            color: $--color-text-primary;
            font-weight: 800;
            margin-bottom: 20px;
        }

        i{
            margin-right: 8px;
            font-size: 14px;
        }

        & p:last-child{
            margin-top: 10px;
        }

    }

    &__footer{
        text-align: center;
        margin-top: 16px;
    }
}

/* 登录页-- 类型1
-------------------------- */
.v-login-box{
    background: #1c2e44;
    box-sizing: border-box;
    @include mq($large) {
        height: 100vh;
    }
    @include mq($medium) {
        height: calc(100vh + 200px);
    }
    @include mq($small) {
        height: calc(100vh + 200px);
    }

    &__logo{
        padding:32px 0 60px 48px;
    }

    &__content{
        box-sizing: border-box;
        width: 482px;
        height: 607px;
        padding: 70px 64px;
        position: absolute;
        z-index: 1000;
        right: 10%;
        top: 50%;
        margin-top: -303px;
        background: $dg--card-background;

        h2{
            font-size: 24px;
            color: $--color-text-regular;
        }

        h1{
            font-size: 40px;
            font-weight: 800;
            color: $--color-text-primary;
            em{
                font-size: 24px;
                color: $--color-text-regular;
            }
            margin-bottom: 48px;
        }
        .el-input__inner{
            background: transparent;
        }

        &-name{
            margin-bottom: 24px;
        }

        &-password{
            margin-bottom: 16px;

        }

        &-name,
        &-password{
            font-size: 14px;
            color: $--color-text-regular;
            &>span{
                display: inline-block;
                padding-bottom: 5px;
            }

        }

        .border-input{

            input{
                border-left: none;
                border-right: none;
                border-top: none;
                padding-left: 0;
            }
        }

        &-tips{
            margin-bottom: 48px;
            a{
                float: right;
                font-size: 14px;
            }
            .el-checkbox__label{
                font-size: 14px;
            }
        }

        &-btn{
            width: 100%;
            height: 48px;
            font-size: 18px;
        }
    }

}

//左侧动画图
.v-login-box__bg{
    display: inline-block;
    /*border: 1px solid red;*/
    position: absolute;
    top: 26%;
    left: 8%;

    .logo-rotate{
        /*border: 1px solid red;*/
        position: absolute;
        top: -124px;
        left: 126px;
        z-index: 10;
        width: 500px;
    }

    .logo-bottom{
        width: 800px;
    }
    .line-position{
        position: absolute;
    }
    .line-left-1{
        top: -78px;
        left: 86px;
    }
    .line-left-2{
        top: 10px;
        left: 110px;
    }
    .line-right-1{
        top: 40px;
        right: 175px;
    }
    .line-right-2{
        top: -80px;
        right: 251px;
    }
    .line-right-3{
        top: 100px;
        right: 235px;
    }
    .line-far-3{
        top: 118px;
        right: 341px;
    }
    .line-close-3{
        top: -118px;
        right: 321px;
    }
}

/* 详情页 -- 高级
-------------------------- */
.v-detail-page{

    &__box{
        margin-bottom: 24px;

        &-tittle{
            margin-bottom: 16px;
        }

        &-row{
            padding: 17px 0 24px 10px;
            border-bottom: solid 1px $--border-color-extra-light;

            .text-title{
                display: inline-block;
                width: 100px;
                text-align: right;
            }
        }

        p{
            line-height: 16px;
        }

        .el-col{
            padding: 5px 0;
        }

        &-no{
            color: red;
        }

    }

    &__table{
        .el-form--inline .el-form-item{
            display: block;
            margin-bottom: 0;
        }
        .el-table__body td{
            background: transparent;
        }
    }
}

/* 详情页 -- 基础
-------------------------- */
.v-list-details{

    &-box{
        padding-bottom: 24px;
        margin-bottom: 24px;
        border-bottom:1px solid $--disabled-fill-base;

        h2{
            font-weight: 800;
            line-height: 16px;
            margin-bottom: 15px;
            color: $--color-text-secondary;
        }

        &__text{
            margin-top: 16px;
            max-width: 1000px;
            color: $--color-text-regular;
            margin-bottom: 12px;
        }

        &__middle{

            margin-bottom: 17px;
            &>span:first-child{
                i{
                    font-size: 14px;
                    width: 14px;
                    height: 14px;
                    color: #1890ff;
                    margin-right: 3px;
                    position: relative;
                    top: 1px;
                }
                a{
                    margin-right: 8px;
                }
            }
            &-time{
                font-size: 12px;
                margin-left: 10px;
                color: $--color-text-placeholder;
            }
        }

        &__footer{
            font-size: 12px;
            line-height: 14px;
            color: $--color-text-secondary;
            position: relative;
            left: -13px;
            &-border{
                border-right: 1px solid $--disabled-fill-base;
            }
            span{
                padding: 0 16px;
            }
            i{
                font-size: 14px;
                margin-right: 8px;
            }
        }

    }
}



/* 项目样式
-------------------------- */
.demo-scroll-bar {
	width: 100%;
	height: 500px;
	padding-top: 10px;
	overflow: hidden;
}

/* 实例可视化样式
-------------------------- */
.v-code-demo {
	padding: 0 16px;
	&__header {
		position: relative;
		height: 48px;
		&:before {
			content: "";
			position: absolute;
			left: 10%;
			top: 13px;
			width: 90%;
			border-bottom: 1px dashed #e6e7eb;
		}
	}
	&__title {
		position: absolute;
		top: 0;
		left: 0;
		width: 68px;
		height: 28px;
		line-height: 28px;
		text-align: center;
		background: #f2f4f6;
		border-radius: 4px;
		color: #666;
	}
	&__content {

	}
}

/* 卡片布局 card-layout
-------------------------- */
.u-card-layout{
	margin-bottom: 20px;
	box-sizing: border-box;
	&-item{
		box-sizing: border-box;
		display: inline-block;
		text-align: center;
		overflow: hidden;
		&_son{
			padding: 8px 0 3px 0
		}
	}
	&-pagination{
		box-sizing: border-box;
		height: 30px;
		text-align: right;
		padding-right: 20px;
	}
}
//表格标题
  .table-title{
    display: flex;
    align-items: center;
      .v-link{
        display: inline-block;
        max-width: 200px;
        overflow: hidden;
        word-break: keep-all;
        white-space: nowrap;
        text-overflow: ellipsis;
        margin-right: 14px;
      }
      .el-tag{
        padding-left: 8px;
        padding-right:7px;
        margin-right: 10px;
      }
    }
//紧急程度
.urgentLevel{
  position: relative;
  &::before{
    content: ' ';
    position: absolute;
    top: 25%;
    left:0;
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
  }
  span{
    margin-left: 20px;
  }
}
.urgentLevel1::before{
  background: #F5212C;
}
.urgentLevel2::before{
  background: #FEB900;
}
.urgentLevel3::before{
   background: #1790FE;
}
.el-input-group__append{
  background: $--color-primary!important;
  border-color:$--color-primary!important;
}
.el-input-group__append .el-button{
    background: $--color-primary!important;
    color: $--color-white!important;
    border-color:$--color-primary!important;
    border-radius: 0;
}
.breadcrumb-box{
  display: flex;
  align-items: center;
  margin: 0 1.5rem;
  span{
    font-size: 14px;
  }
}
.el-time-spinner__wrapper {
  overflow: hidden;
}
.form-item-checked-radio{
   height: 20px;
   line-height: 0.5;
    margin-left: 8px;
    position: relative;
    top:-50%;
    /deep/.el-checkbox__input {
      .el-checkbox__inner {
        border-radius: 50%;
      }
    }
}

.el-input-group__append{
  .is-disabled{
    background: #a0cfff!important;
  }
}
